通过JavaScript更改CSS属性_Javascript_Css_Stylesheet

通过JavaScript更改CSS属性

javascript css

通过JavaScript更改CSS属性,javascript,css,stylesheet,Javascript,Css,Stylesheet,我需要一个函数来“动态”更改HTML页面中某些元素的外观，但我无法做到这一点问题是我不能使用像这样的命令 document.write ('<style type="text/css">body {background-color: #cccccc;}</style>'); document.body.style.background = '#cccccc'; 因为我不知道它是否可以应用于其他不太容易的情况，因为我需要更改元素的外观，例如td.myclass或兄弟元

我需要一个函数来“动态”更改HTML页面中某些元素的外观，但我无法做到这一点

问题是我不能使用像这样的命令

document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');

document.body.style.background = '#cccccc';

因为我不知道它是否可以应用于其他不太容易的情况，因为我需要更改元素的外观，例如

td.myclass

或兄弟元素，例如

th[scope=col]+th[scope=col]+th[scope=col]

我怎么做？谢谢

您可以对任意多个元素使用

id

属性，但它们必须是唯一的。您也可以使用

class

属性，但是要找到所需的特定元素会有点困难

然后，使用JavaScript，您可以使用

document.getElementById

函数检索要设置CSS属性的DomeElement对象。对于类，您需要首先通过调用

document.getElementsByTagName

获取具有指定标记名的所有元素，然后迭代生成的数组并检查每个元素是否具有提供的类名，如果具有，则添加到数组中，如果你想使用复杂的选择器，比如

th[scope=col]

，使用样式表可以直接在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>

document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';


使用CSSOM修改样式表规则
身体{
背景色：红色；
}
var stylesheet=document.styleSheets[1]；
stylesheet.cssRules[0]。style.backgroundColor=“蓝色”；
主体背景颜色的样式表声明通过JavaScript修改。

该示例由Mozilla贡献者提供，并从以下内容复制：

例如：

<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>

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';
}

var myObj=document.getElementsByClassName（'myclass'）；
对于（var i=0；i，您可以通过设置样式对象的属性轻松访问和修改任何DOM的CSS属性。例如，要更改id为#yourid的DOM元素的背景色，请执行以下操作
document.getElementById('yourid').style.backgroundColor = "#f3f3f3";

请注意，由连字符分隔的两个名称（即背景色、字体大小）组成的CSS属性将转换为camelCase表示法，即backgroundColor和fontSize，而单字属性保留各自的名称

<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>

html，正文，div，span，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，img，ol，ul，
li、字段集、表单、标签、图例、表格、标题、tbody、tfoot、thead、tr、th、td{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
字体系列：Segoe UI，无衬线；
}
.header、.container、.footer{
最小高度：100px；
}
.标题{
背景色：#7575；
}
.集装箱{
背景色：#中交；
}
.页脚{
背景色：#7575；
}
.header、.footer、.column{
文本对齐：居中；
}
.栏目{
浮动：左；
最小宽度：300px；
左边框：1px纯蓝色；
右边框：1px纯蓝色；
左边距：10px；
}
函数headerContentFooter（页眉勘误表、页脚比率）{
totalHeight=document.height；
人头高度=0；
容器高度=0；
页脚高度=0；
if（页眉偏差<0.5和页脚比率<0.5）{
人头高度=总高度*人头偏差；
页脚高度=总高度*页脚比率；
容器高度=总高度-（头部高度+底部高度）；
document.getElementsByClassName（“header”）[0]。style.height=”“+headerHeight+“px”；
document.getElementsByClassName（“容器”）[0]。style.height=“+containerHeight+“px”；
document.getElementsByClassName（“footer”）[0].style.height=”“+footerHeight+“px”；
document.getElementsByClassName（“header”）[0]。style.minHeight=”“+headerHeight+“px”；
document.getElementsByClassName（“容器”）[0].style.minHeight=”“+containerHeight+“px”；
document.getElementsByClassName（“页脚”）[0].style.minHeight=”“+footerHeight+“px”；
document.getElementsByClassName（“header”）[0].style.maxHeight=”“+headerHeight+“px”；
document.getElementsByClassName（“容器”）[0].style.maxHeight=”“+containerHeight+“px”；
document.getElementsByClassName（“footer”）[0].style.maxHeight=”“+footerHeight+“px”；
}
}
标题
左中右
页脚
headerContentFooter（0.05,0.05）；
谢谢你的回复。我对所有答案都投了票，因为每一个答案都教了我不知道的东西。我接受了一个最简单的答案。这个语法不对；标准的方法是使用camelCase，例如myObj[I].style.backgroundColor
。但是一个点后跟一个括号是无效的JavaScript。这似乎是一个令人难以置信的麻烦。您必须检查每个CSSRule
对象中每个CSSRule
集合中每个CSSStyleSheet
对象的cssText
属性，或者依赖（嵌套）集合中特定顺序的相关规则。直接修改CSS属性以使其应用于动态添加的元素将非常有用。