tic*_*tic 12 javascript css stylesheet
我需要一个函数来"动态"改变我的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].
我该怎么做？谢谢!
ken*_*ytm 13
可以使用document.styleSheets列表直接在JS中操作样式表.
例:
<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提供,并复制自:
通过设置样式对象的属性,您可以轻松访问和修改任何DOM的CSS属性.即,要更改id为#yourid的DOM元素的背景颜色,请执行此操作
document.getElementById('yourid').style.backgroundColor = "#f3f3f3";
请注意,由连字符分隔的两个名称组成的CSS属性(即background-color,font-size)将转换为camelCase表示法,即backgroundColor和fontSize,而单个措辞属性保留其各自的名称
您可以根据需要将该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';
}| 归档时间： |
|
| 查看次数： |
33343 次 |
| 最近记录： |