dom修改css样式

最新推荐文章于 2023-09-05 14:28:51 发布

codingCoge

最新推荐文章于 2023-09-05 14:28:51 发布

阅读量2.3k

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/79290292

版权

网页前端专栏收录该内容

58 篇文章 2 订阅

订阅专栏

CSS-DOM:
style属性是对象类型
nodeName是tring类型
如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担 
 如果文档内容需要一个CMS来处理  给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的
font-size属性要用元素.style.fontSize来检索

考虑纯粹用css还是用DOM设置样式 需要考虑这些问题：
1最简单的解决方案
2.那种解决方案得到更多浏览器的支持
一般改变元素的呈现效果用css
改变某元素的行为用dom
如果是根据行为改变呈现效果  那就要考虑情况了  例子：+

响应事件：  可以使用伪class属性允许我们根据html元素的状态来改变样式 比如 
a：hover{
    color：#c60；
}  这个伪类基本上只是用来改变链接的样式

利用DOM可以实现 鼠标移动到某表格的行时字体加黑加粗
function rowsd(){
    if(!document.getElementByTagName) return false;
    var rows=document.getElementByTagName("tr");
    for(var i=0;i<rows.length;i++){
        rows[i].onmouseover=function(){
            this.style.fontWeight="bold";    //指当前行
        }
        rows[i].onmouseout=function(){
            this.style.fontWeight="normal";
        }
    )
}
addLoadEvent(rowsd);
元素的属性style只有在内联的时候才可以检索  如果script放在head或者css外部调用的时候 style是无法获取信息的  
但是 还可以通过style来设置各种html呈现效果 是可以用style检索的 你用dom设置的样式也可以用dom来检索 举例：
function getNextElement(node) {
  if(node.nodeType == 1) {
    return node;
  }
  if (node.nextSibling) {
    return getNextElement(node.nextSibling);
  }
  return null;
}

function xx(){
    var headers=document.getElement("h1");
    for(var i;i<headers.length;i++){
        var elem=getNextElement(headers[i].nextSibling);
        elem.style.fontWeight="bold";
        elem.style.fontSize="1.2em";       //通过DOM来设置css 就可以通过style来检索了
    }

}
在事件发生时设置有关元素的样式
根据某种条件反复设置某种样式
html:
<body>
  <table>
    <caption>Itinerary</caption>
    <thead>
    <tr>
      <th>When</th>
      <th>Where</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>June 9th</td>
      <td>Portland, <abbr title="Oregon">OR</abbr></td>
    </tr>
    <tr>
      <td>June 10th</td>
      <td>Seattle, <abbr title="Washington">WA</abbr></td>
    </tr>
    <tr>
      <td>June 12th</td>
      <td>Sacramento, <abbr title="California">CA</abbr></td>
    </tr>
    </tbody>
  </table>
</body>
css：
body {
  font-family: "Helvetica","Arial",sans-serif;
  background-color: #fff;
  color: #000;
}
table {
  margin: auto;
  border: 1px solid #699;
}
caption {
  margin: auto;
  padding: .2em;
  font-size: 1.2em;
  font-weight: bold;
}
th {
  font-weight: normal;
  font-style: italic;
  text-align: left;
  border: 1px dotted #699;
  background-color: #9cc;
  color: #000;
}
th,td {
  width: 10em;
  padding: .5em;
}
.odd {
  background-color: #ffc;
}

js：
function  stritable(){
    if(!document.getElementByTagName) return false;
    var tables=document.getElementByTagName("table");
    var odd,rows;
    for(var i=0;i<tables.length;i++){
        odd=false;
        rows=tables[i].getElementByTagName("tr");
        for(var j=0;j<rows.length;j++){
            if(odd){
                    rows[i].style.backgroundColor="#ffc";
                    odd=false;
            }else{
                odd=true;
            }
        }
    }
}


但是这样子 如果需要修改就需要寻找这个函数 然后修改 比较麻烦
可以采用这个方法：
elem.setAttribute("class","intro");
也可以用 className属性完成  元素节点才有
元素.className=value；
这样 在value样式类中修改即可
可是这样子就是直接覆盖掉了
如果想要追加可以这样
elem.className+=" intro";    intro前面有空格

现在css样式里面添加一i套声明   这样只要修改add就可以来改变样式了
.add{
    background-color:#ffc;
}
举例：function stripeTables() {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        addClass(rows[j],"odd");
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
addLoadEvent(stripeTables);

要学会对函数进行抽象 可以增加通用性 如：
function stripeTables(Tag,Name) {
  if (!document.getElementsByTagName) return false;
  var tables = document.getElementsByTagName(Tag);
  for (var i=0; i<tables.length; i++) {
    var odd = false;
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j++) {
      if (odd == true) {
        addClass(rows[j],Name);
        odd = false;
      } else {
        odd = true;
      }
    }
  }
}

codingCoge

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dom修改css样式

CSS-DOM:style属性是对象类型nodeName是tring类型如果文档的内容需要定期编辑和刷新添加class属性的工作就会变成一种负担如果文档内容需要一个CMS来处理给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的font-size属性要用元素.style.fontSize来检索考虑纯粹用css还是用DOM设置样式需要考虑这些问题：1最...
复制链接

扫一扫

专栏目录