【无标题】js中元素的属性操作和样式设置

最新推荐文章于 2024-03-19 18:28:30 发布

半糖奶咖

最新推荐文章于 2024-03-19 18:28:30 发布

阅读量93

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/The_over/article/details/129977479

版权

元素的属性操作和样式设置

元素的属性操作

获取元素的属性 getAttribute(‘属性名’)

 <div id="box" class="box" name_1="name"></div>

 var box = document.getElementById('box')
    console.log(box);
    console.log(box.id);
    console.log(box.className);
    console.log(box.name_1);
    // 获取元素的属性 getAttribute('属性名')
    console.log(box.getAttribute('id'));
    console.log(box.getAttribute('class'));
    console.log(box.getAttribute('name_1'));

设置元素的属性 setAttribute(‘属性名’，‘属性值’')

<div>
        <button id="btn">按钮</button>
        <button id="remove">移出</button>
    </div>

// 设置元素的属性 setAttribute('属性名'，'属性值'')
    document.getElementById('btn').onclick = function () {
        box.setAttribute('class', 'box_1')
    }

移除元素的属性 removeAttribute(‘属性名’)

// 移除元素的属性 removeAttribute('属性名')
    document.getElementById("remove").onclick = function () {
        console.log('测试');
        box.removeAttribute('id')
        box.removeAttribute('name_1')
        console.log(box.getAttribute('id'));
        console.log(box.getAttribute('name_1'));
    }

元素的样式设置

1、对象.style

2、对象.className

3、对象.setAttribute(“style”)

4、对象.setAttribute(“class”)

5、对象.style.setProperty(“CSS属性”, “CSS属性值”)

6、对象.style.cssText

<style>
    .blue {
        background-color: blue;
    }
</style>

<body>
    <div id="box">我是一个盒子</div>
    <button id="btn">改变背景颜色</button>
</body>

var box = document.getElementById('box')
    document.getElementById('btn').addEventListener('click', function () {
        console.log('测试');
        //1、对象.style
        box.style.backgroundColor = 'blue'
        //2、对象.className
        box.className = 'blue'
        // 3、对象.setAttribute("style")
        box.setAttribute('style', 'background-color:blue')
        // 4、对象.setAttribute("class")
        box.setAttribute('class', 'blue')
        //  5、对象.style.setProperty("CSS属性", "CSS属性值")
        box.style.setProperty('background-color', 'blue')
        //  6、对象.style.cssText 
        box.style.cssText = 'background-color:blue'