元素的属性及样式设置

script~

于 2022-09-13 19:38:02 发布

阅读量381

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_48780364/article/details/126839847

版权

元素的属性

元素就是标签

获取元素
设置元素属性
删除元素属性

<body>
    <header id="head" class="head1" name="head2" name1="head3" style="height: 100px;">这里是头部标签</header>
    <button id="set">设置</button>
    <button onclick="fn1()">删除</button>
</body>

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

// 获取元素属性的方法 getAttribute('属性名')
    console.log(head.getAttribute('id'));
    console.log(head.getAttribute('class'));
    console.log(head.getAttribute('name'));
    console.log(head.getAttribute('name1'));
    console.log(head.getAttribute('style'));

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

 // 设置元素的属性  setAttribute('属性名'，'属性值')
    document.getElementById('set').onclick = function () {
        head.setAttribute('id', 'he1')
        head.setAttribute('class', 'he2')
        head.setAttribute('name2', 'he3')
    }

删除元素属性 removeAttribute(‘属性名’)

// 删除元素的属性  removeAttribute('属性名')
    function fn1() {
        // console.log('测试');
        head.removeAttribute('id')
        head.removeAttribute('class')
        head.removeAttribute('name')
        head.removeAttribute('style')
    }

元素的样式设置

样式的设置方式：

对象.style
对象.className
对象.setAttribute(‘style’)
对象.setAttribute(‘class’)
对象.style.setProperty(‘css属性名’,’css属性值’)

对象.style.cssText

<script>
    /*   
    1、对象.style
    2、对象.className
    3、对象.setAttribute('style')
    4、对象.setAttribute('class')
    5、对象.style.setProperty('css的属性名'，'css属性值')
    6、对象.style.cssText
    */

    document.getElementsByClassName('btn')[0].onclick = function () {
        // console.log('测试');
        // 1、
        // document.getElementById('head').style.backgroundColor = 'red'
        // 2、
        // document.getElementById('head').className = 'head'
        // 3、
        // document.getElementById('head').setAttribute('style', 'background-color:red')
        // 4、
        // document.getElementById('head').setAttribute('class', 'head')
        // 5、
        // document.getElementById('head').style.setProperty('background-color', 'red')
        // 6、
        document.getElementById('head').style.cssText = 'background-color: red;height:200px;'

    }

</script>