通過JavaScript更改CSS屬性
[英]Changing CSS properties via 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] 。
我該怎么做？ 謝謝！
6 個解決方案
解決方案1
13 已采納 2010-03-14 10:26:26
可以使用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提供，並復制自：
解決方案2
8 2011-01-23 17:49:33
通過設置樣式對象的屬性，您可以輕松訪問和修改任何DOM的CSS屬性。 即，要更改id為#yourid的DOM元素的背景顏色，請執行此操作
document.getElementById('yourid').style.backgroundColor = "#f3f3f3";
請注意，由連字符分隔的兩個名稱組成的CSS屬性（即background-color，font-size）將轉換為camelCase表示法，即backgroundColor和fontSize，而單個措辭屬性保留其各自的名稱
解決方案3
5 2010-03-14 10:21:41
您可以根據需要為任意數量的元素使用id屬性，但它們必須是唯一的。 您也可以使用class屬性，但要找到您想要的特定元素會更加困難。
然后，使用JavaScript，您可以使用document.getElementById函數來檢索DOMElement對象以設置CSS屬性。 對於類，您需要首先通過調用document.getElementsByTagName獲取具有指定標記名稱的所有元素，然后迭代生成的數組並檢查每個元素是否具有提供的類名，如果是，則添加到數組，循環返回后。
解決方案4
5 2010-03-14 17:14:11
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';
}解決方案5
1 2012-08-12 10:31:25
<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>
解決方案6
1 2010-03-14 10:23:47
如果你想使用像th[scope=col]這樣的復雜選擇器，請使用jQuery
在 javascript 中更改 CSS 屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.