dom操作属性(系统的自定义的) 获取属性 css dom绑定事件

web修理工

已于 2023-08-16 14:30:26 修改

阅读量108

点赞数

分类专栏： JavaScript 文章标签： css 前端

于 2020-06-06 08:41:38 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/106582604

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

方法一
if(obj.currentStyle){
    return obj.currentStyle[attr];
}else{
    return obj.getComputedStyle(obj,null)[attr]
}

方法二
var dom = docment.getElementById('div');
//获取样式
var attr = dom.style.height
//设置样式
dom.style.height = 111+'px';

方法三
dom.class 获取css样式


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #aa {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<body>
    <a id="aa" x='x' href="www.baidu.com">百度</a>
    <script>
        let aa = document.querySelector('#aa')
        //   获取属性 (系统自带的,点符号和 getAttribute('x'),自定义属性 谁定义谁取出 
        console.log('aa', aa, '\n', 'aa.x', aa.x, '\n', 'aa.getAttribute(x)', aa.getAttribute('x'), 'aa.href', aa.href, '\n', 'aa.getAttribute', aa.getAttribute('href'))
        //  aa <a id="aa" x="x" href="www.baidu.com" xxx="xxx">百度</a> aa.x undefined aa.getAttribute(x) x aa.href file:///C:/Users/Administrator/Desktop/index/www.baidu.com <br> aa.getAttribute www.baidu.com
        // 设置属性
        aa.xx = 'xx'
        aa.setAttribute('xxx', 'xxx')
        console.log('aa', aa, '\n', 'aa.xx', aa.xx, '\n', 'aa.getAttribute(xx)', aa.getAttribute('xx'), '\n', 'aa.xxx', aa.xxx, '\n', 'aa.getAttribute(xxx)', aa.getAttribute('xxx'), '\n', 'aa.href', aa.href, '<br>', '\n', 'aa.getAttribute', aa.getAttribute('href'))
        //  aa <a id="aa" x="x" href="www.baidu.com" xxx="xxx">百度</a>
        //  aa.xx xx 
        //  aa.getAttribute(xx) null 
        //  aa.xxx undefined 
        //  aa.getAttribute(xxx) xxx 
        //  aa.href file:///C:/Users/Administrator/Desktop/index/www.baidu.com <br> 
        //  aa.getAttribute www.baidu.com

        // 删除属性
        // delete aa.href  //没有用
          // delete aa.x  //没有用
        // delete aa.xx  //成功
        // delete aa.xxx  // 没有用
        aa.removeAttribute('href') //成功
        aa.removeAttribute('x') //成功
        aa.removeAttribute('xx') // 失败
        aa.removeAttribute('xxx')//成功
        console.log('aa', aa, '\n', 'aa.xx', aa.xx, '\n', 'aa.getAttribute(xx)', aa.getAttribute('xx'), '\n', 'aa.xxx', aa.xxx, '\n', 'aa.getAttribute(xxx)', aa.getAttribute('xxx'), '\n', 'aa.href', aa.href, '<br>', '\n', 'aa.getAttribute', aa.getAttribute('href'))


   console.log(getComputedStyle(aa,null)['width'] )
   //obj.currentStyle[name]; iE
  
  //获取 body标签的属性
  window.getComputedStyle(document.body,null).background;
  

    </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            height: 108px;
            line-height: 108px;
        }

        li:nth-child(2n+1) {
            background-color: rgba(0, 255, 0, 0.5);
        }
    </style>
</head>

<body>
    <ul>
        <li id="one" data-one="one">1</li>
        <li id="tow" onclick="tow()" data-two="two">2</li>
        <li id="three" onclick="three(this)" data-two="three">3</li>
    </ul>
    <script>
        // 方式一
        let one = document.getElementById('one');
        one.onclick = function (e) {
            console.log(e.target.id)  // 私有舒心
            console.log(e.target.dataset)  // 私有舒心
        }
        // 方式二
        function tow(e) {
            console.log(e, '===e')
        }
        // 方式三
        function three(val) {
            console.log(val.id, '===id')
            console.log(val.dataset, '===dataset')
        }
    </script>
</body>

</html>

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
dom操作属性(系统的自定义的) 获取属性 css dom绑定事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> #aa { .
复制链接

扫一扫