Получить свойства CSS из JS
- Автор темы ALEXu
- Дата начала
- Статус
medwoodu
Злобный модер
- Регистрация
- 22.12.2005
- Сообщения
- 1 418
лучше всего делать это jquery
Код:
$('#link_search a').css('fontSize','20px')http://www.wbex.ru/index.php/JavaScript_Tutorial/DOM_Node/Introduction
ALEXu
в сером
- Регистрация
- 29.12.2010
- Сообщения
- 307
Если бы id был у ссылки, тогда нет проблем. Как вообще обратиться когда стиль задан по id (#link_search)?
С jquery все понятно, но хочется разобраться как сделать руками. По ссылке там через style, с такой записью #link_search не сработает.
Нарыл вот такой вариант:
Но так можно только получить значение, изменить нельзя.
С jquery все понятно, но хочется разобраться как сделать руками. По ссылке там через style, с такой записью #link_search не сработает.
Нарыл вот такой вариант:
Код:
getComputedStyle(document.getElementById('link_search').childNodes[0]).getPropertyValue("color")в сером как-то так я сделал:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
</head>
<body>
<div id="link_search">
<a href="#">Тест</a>
<a href="#">Тест2</a>
<a href="#">Тест3</a>
<a href="#">Тест4</a>
<a href="#">Тест5</a>
</div>
<script type="text/javascript">
var id = document.getElementById('link_search');
var list = id.childNodes;
for (var i=0; i<list.length; i+=2) {
list.style.color = '#ff9023';
list.style.fontSize = '12pt';
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
</head>
<body>
<div id="link_search">
<a href="#">Тест</a>
<a href="#">Тест2</a>
<a href="#">Тест3</a>
<a href="#">Тест4</a>
<a href="#">Тест5</a>
</div>
<script type="text/javascript">
var id = document.getElementById('link_search');
var list = id.childNodes;
for (var i=0; i<list.length; i+=2) {
list.style.color = '#ff9023';
list.style.fontSize = '12pt';
}
</script>
</body>
</html>
покажи исходный код
Для особо одаренного!!!
B css указан #link_search a{ font-size: 12pt; color: #ff9023; }
с помощью javascripta не меняя запись в CSS делаем вот что { font-size: 126pt; color: #999; }
Вот полный исходный текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
#link_search a{
font-size: 12pt;
color: #ff9023;
}
</style>
<script type="text/javascript">
window.onload = function(){
var id = document.getElementById('link_search');
var list = id.childNodes;
for (var i=0; i<list.length; i+=2) {
list.style.color = '999';
list.style.fontSize = '126pt';
}
}
</script>
</head>
<body>
<div id="link_search">
<a href="#">Тест</a>
<a href="#">Тест2</a>
<a href="#">Тест3</a>
<a href="#">Тест4</a>
<a href="#">Тест5</a>
</div>
</body>
</html>
Для особо одаренного!!!
B css указан #link_search a{ font-size: 12pt; color: #ff9023; }
с помощью javascripta не меняя запись в CSS делаем вот что { font-size: 126pt; color: #999; }
Вот полный исходный текст:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
#link_search a{
font-size: 12pt;
color: #ff9023;
}
</style>
<script type="text/javascript">
window.onload = function(){
var id = document.getElementById('link_search');
var list = id.childNodes;
for (var i=0; i<list.length; i+=2) {
list.style.color = '999';
list.style.fontSize = '126pt';
}
}
</script>
</head>
<body>
<div id="link_search">
<a href="#">Тест</a>
<a href="#">Тест2</a>
<a href="#">Тест3</a>
<a href="#">Тест4</a>
<a href="#">Тест5</a>
</div>
</body>
</html>
tigra60
Спасатель
- Регистрация
- 10.12.2009
- Сообщения
- 1 990
Еще как работает!
Код:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Script test</title>
<style type="text/css">
#link_search a{
font-size: 12pt;
color: #ff9023;
}
</style>
<h3>Ссылки с ID</h3>
<ul id="link_search">
<li><a href="#">Ссылка 1</a>
<li><a href="#">Ссылка 2</a>
<li><a href="#">Ссылка 3</a>
</ul>
<h3>Ссылки без ID</h3>
<ul>
<li><a href="#">Ссылка 4</a>
<li><a href="#">Ссылка 5</a>
<li><a href="#">Ссылка 6</a>
</ul>
<script type="text/javascript">
// получаем элемент с нужным ID
var element = document.getElementById('link_search');
// получаем массив элементов А внутри элемента с нужным ID
var links = element.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
links[i].style.color = 'red';
}
</script>Читайте Фленагана!!!
ALEXu
в сером
- Регистрация
- 29.12.2010
- Сообщения
- 307
Да, похоже я запутал всех, попробую обяснить:
и
не одно и тоже.
Получается мы применяем новые свойства, которые имеют больший вес чем в #link_search a. Я хотел узнать есть ли возможность управлять стилями заданными в <style> через id. Но нашел способ только их получить. Пришел к выводу, что никак нельзя.
Код:
#link_search a{
font-size: 12pt;
color: #ff9023;
}
Код:
links[i].styleПолучается мы применяем новые свойства, которые имеют больший вес чем в #link_search a. Я хотел узнать есть ли возможность управлять стилями заданными в <style> через id. Но нашел способ только их получить. Пришел к выводу, что никак нельзя.
- Статус
