Свойства Changing CSS через JavaScript
Мне нужна функция для изменения появления некоторых элементов в моей странице HTML "на лету", но я не могу сделать это.
Проблема состоит в том, что я не могу использовать команду как
document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');
потому что я должен делать изменения эффективными, когда страница уже загружается, с помощью ссылки как
<a onmouseclick="Clicker(1)" href="#">clic</a>
и я не могу использовать команду как
document.body.style.background = '#cccccc';
потому что я не знаю, можно ли к этому относиться другой не так легкие случаи, потому что я должен изменить появление элементов такой как td.myclass или одноуровневые элементы такой как th[scope=col]+th[scope=col]+th[scope=col].
Как я могу сделать это?Спасибо!
4 ответа
Таблицами стилей можно управлять непосредственно в JS с помощью списка document.styleSheets.
Пример:
<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>
Пример подготовлен Mozilla Contributors и скопирован из:
Вы можете использовать атрибут id для любого количества элементов, но они должны быть уникальными.
Вы также можно использовать атрибут class , но найти нужный элемент будет немного сложнее.
Затем, используя JavaScript, вы можете использовать функцию document.getElementById , чтобы получить объект DOMElement для установки свойств CSS. Для классов вам нужно сначала получить все элементы с указанным именем тега, вызвав document.getElementsByTagName , затем перебрав полученный массив и проверив, имеет ли каждый элемент указанное имя класса, и если оно есть. , затем добавление в массив, который после цикла возвращается.
document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';Пример:
document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';
Если вы хотите изменить все td.myclass
var myObj = document.getElementsByClassName('myclass');
for(var i=0; i<myObj.length; i++){
myObj[i].style['background-color'] = '#ccc';
}Если вы хотите использовать сложный селектор типа th[scope=col], используйте jQuery