通过 JavaScript 更改 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2441809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing CSS properties via JavaScript
提问by tic
I need a function to change the appearance of some elements in my HTML page "on the fly", but I am not able to do it.
我需要一个函数来“即时”更改 HTML 页面中某些元素的外观，但我无法做到。
The problem is that I cannot use a command like
问题是我不能使用像
document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');
because I need to make the changes effective when the page is already loaded, using a link like
因为我需要在页面已经加载后使更改生效，使用类似的链接
<a onmouseclick="Clicker(1)" href="#">clic</a>
and I cannot use a command like
我不能使用像这样的命令
document.body.style.background = '#cccccc';
because I do not know if it can be applied to other not so easy cases, because I need to change the appearance of elements such as td.myclassor sibling elements such as th[scope=col]+th[scope=col]+th[scope=col].
因为我不知道它是否可以应用于其他不太容易的情况，因为我需要更改td.myclass诸如th[scope=col]+th[scope=col]+th[scope=col].
How can I do it? Thanks!
我该怎么做？谢谢！
采纳答案by kennytm
The stylesheets can be manipulated directly in JS with the document.styleSheetslist.
样式表可以直接在 JS 中使用document.styleSheetslist进行操作。
Example:
例子：
<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>
The example is by Mozilla Contributors and copied from:
该示例由 Mozilla 贡献者提供并复制自：
回答by dade
You can easily access and modify CSS propery of any DOM by setting properties of the style object. i.e. to change the background color of a DOM element with id of #yourid you do this
您可以通过设置样式对象的属性轻松访问和修改任何 DOM 的 CSS 属性。即要更改 ID 为 #yourid 的 DOM 元素的背景颜色，请执行此操作
document.getElementById('yourid').style.backgroundColor = "#f3f3f3";
note that CSS properties that are made up of two names seperated by an hyphen, i.e background-color, font-size are turned into camelCase notation, i.e backgroundColor and fontSize while single worded properties retain their respective names
请注意，由两个名称组成的 CSS 属性由连字符分隔，即背景颜色、字体大小被转换为驼峰式表示法，即背景颜色和字体大小，而单字属性保留其各自的名称
回答by gmunkhbaatarmn
document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';Example:
例子：
document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';
If you want change all td.myclass
如果你想改变所有 td.myclass
var myObj = document.getElementsByClassName('myclass');
for(var i=0; i<myObj.length; i++){
myObj[i].style['background-color'] = '#ccc';
}回答by Jacob Relkin
You can use the idattribute for as many elements as you like, but they must be unique.
You can also use the classattribute, but to find the specific element you want will be bit tougher.
您可以id为任意数量的元素使用该属性，但它们必须是唯一的。您也可以使用该class属性，但要找到您想要的特定元素会有点困难。
Then, using JavaScript, you can use the document.getElementByIdfunction to retrieve the DOMElement object to set CSS properties on. For classes, you will need to first get all the elements with the specified tag name by calling document.getElementsByTagName, then iterating over the resulting array and checking if each element has the provided class name, and if it does, then adding to an array, which after the loop gets returned.
然后，使用 JavaScript，您可以使用该document.getElementById函数检索 DOMElement 对象以设置 CSS 属性。对于类，您需要首先通过调用 获取具有指定标记名称的所有元素document.getElementsByTagName，然后遍历结果数组并检查每个元素是否具有提供的类名，如果有，则添加到数组中，之后循环被返回。
回答by N 1.1
回答by GLES
<html>
<head>
<style type="text/css">
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:Segoe UI, sans-serif;
}
.header, .container, .footer {
min-height:100px;
}
.header {
background-color:#757575;
}
.container {
background-color:#cccccc;
}
.footer {
background-color:#757575;
}
.header, .footer, .column {
text-align:center;
}
.column {
float:left;
min-width:300px;
border-left:1px solid blue;
border-right:1px solid blue;
margin-left:10px;
}
</style>
<script type="text/javascript">
function headerContentFooter(headerRatio, footerRatio) {
totalHeight = document.height;
headerHeight = 0;
containerHeight = 0;
footerHeight = 0;
if(headerRatio < 0.5 && footerRatio < 0.5) {
headerHeight = totalHeight * headerRatio;
footerHeight = totalHeight * footerRatio;
containerHeight = totalHeight - (headerHeight + footerHeight);
document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
}
}
</script>
</head>
<body>
<div class="header">HEADER</div>
<div class="container">
<div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
</div>
<div class="footer">FOOTER</div>
<script type="text/javascript">
headerContentFooter(0.05, 0.05);
</script>
</body>
</html>
