CSS-DOM

最新推荐文章于 2021-11-23 20:08:41 发布

liaoai

最新推荐文章于 2021-11-23 20:08:41 发布

阅读量226

点赞数 4

分类专栏： Vue 文章标签： css javascript html

本文链接：https://blog.csdn.net/liaoai/article/details/120774125

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文探讨了如何通过style属性操作样式，包括为h1元素的后续节点添加颜色，以及使用CSS和JavaScript为表格中的偶数行创建动态样式。同时涵盖了响应事件和选择器的实践应用，展示了前端开发中的基础技术结合。

摘要由CSDN通过智能技术生成

文章目录

三位一体的网页

结构层——由HTML或XHTML之类的标记语言创建

表示层——由CSS负责完成

行为层——JavaScript和DOM领域

通过style属性获取样式

style属性是一个对象

element.style.color

当需要引用中间带-的CSS属性时，需要用驼峰命名法，例：

element.style.fontSize

注：有很大局限性

style属性只能返回内嵌样式，只有把style属性插入到标记里，才可以用DOMstyle属性去查询

<p id="example" style="color:red">xxx</p>	可查询

不可查询
p#example{
	color:red;
}

不可查询
<style>
    p#example{
        color:red;
    }
</style>

1.为h1元素下一元素节点添加样式

JS代码如下

//为h1元素下一元素节点添加样式
function styleHeaderSiblings(node){
    var headers = document.getElementsByTagName("h1");
    var elem;
    for(var i = 0; i < headers.length; i++){
        elem = getNextElement(headers[i].nextSibling);
        elem.style.color = "red";
    }
}
function getNextElement(node){
    if(node.nodeType==1){
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}

//注意需寻找h1元素的下一元素节点而非下一个节点

2.为表格中偶数行添加样式

1）CSS选择器

tr:nth-child(even){
	background-color:#ffc;
}

2）JavaScript

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

响应事件

1）CSS伪类

tr:hover{
	font-weight : bold;
}

2）JavaScript

function highlightRows() {
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseout = function () {
            this.style.fontWeight = "bold";
        } 
    }
}