【JS】Day10

GreatWillSSS

已于 2022-11-08 09:22:36 修改

阅读量76

点赞数

分类专栏：二阶段文章标签： html5

于 2022-11-07 11:33:07 首次发布

本文链接：https://blog.csdn.net/qq_62417130/article/details/127725086

版权

二阶段专栏收录该内容

34 篇文章 0 订阅

订阅专栏

学习内容：

操作元素样式
操作元素类名
操作元素属性
操作元素内容

操作元素样式

//ele.style
//访问或设置行内样式
//window.getComputedStyle()
//获取非行内样式 
//标准浏览器
//alert(getComputedStyle(o_div,1).width);
//IE浏览器
//alert(o_div.currentStyle.width);
//兼容
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
    // return window(预解析里没有，需要声明).getComputedStyle ? getComputedStyle(obj,1)[attr]: obj.currentStyle[attr];
}

//我要操作页面中div的样式，所以我们得获取到页面中这个div
var o_div = document.querySelector('#box');
//给这个元素添加样式
o_div.style.width = '100px';
o_div.style.height = '100px';
// background-color ：在CSS复合属性中的 '-' 如果在JS中使用时，使用小驼峰的写法
// o_div.style.backgroundColor = 'red';
// background-color ：在CSS复合属性中的 '-' 如果在JS中使用时，想要设置属性时，中间的 '-' ，那么得使用字符串的方式，结合对象访问属性时使用[]
o_div.style['background-color'] = 'yellow';
alert(o_div.style.backgroundColor);

    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
<body>
    <div id="box"></div>
    <script>
        //我要操作页面中div的样式，所以我们得获取到页面中这个div
        var o_div = document.querySelector('#box');
        //获取div的宽
        // alert(o_div.style.width);
        //获取内部或外部样式中的宽，（也就是非行内样式中的宽）
        // var width = getComputedStyle(o_div).width;  //标准浏览器支持
        // var width = o_div.currentStyle.width;  //IE浏览器
        //兼容
        function getStyle(obj,attr){ //obj: 某个节点对象  attr : 属性
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
        }

        // function getStyle(obj,attr){ //obj: 某个节点对象  attr : 属性
        //     return window.getComputedStyle ? getComputedStyle(obj)[attr] : obj.currentStyle[attr]
        // }
        var width = getStyle(o_div,'width');
        alert(width);
    </script>
</body>

操作元素类名

//ele.className
//ele.classList
//1. ele.classList: 获取元素的全部类名
//2. ele.classList.lentgh: 获取到元素类名的数量
//3. ele.classList.add(): 向元素添加一个或多个类名
//4. ele.classList.remove(): 可以删除元素的一个或多个类名
//5. ele.classList.item(index): 可以获取到元素类名索引为index的类名
//6. ele.classList.toggle(): 可以为元素切换类名
//7. ele.classList.contains(x): 查看元素是否存在类名为"x"的类

<div id="box" class="pox pox1"></div>
<script>
    //获取元素对象
    var o_div = document.querySelector('#box');
    //添加属性
    o_div.title = '标题';
    o_div.id = 'box1';
    // o_div.class = 'pox'; //class : 是保留字，不能直接使用
    // o_div.className += ' pox2';
    // o_div.className += ' pox3';
    // console.log(o_div.className);
    o_div.classList.add('pox2','pox3','pox4');
    o_div.classList.remove('pox3');
    console.log(o_div.classList.item(2));
    console.log(o_div.classList.length);
</script>

//灯
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
<body>
    <input type="button" value="开|关" id="onoff">
    <div id="box"></div>
    <script>
        //获取页面元素
        var o_onoff = document.querySelector('#onoff');
        var o_div = document.querySelector('#box');
        //添加事件
        o_onoff.onclick = function(){
            //检测类名是否存在
            console.log(o_div.classList.contains('active'));
            //如果存在，则删除。如果不存在，则添加
            o_div.classList.toggle('active');
        }
    </script>
</body>

操作元素属性

//原生属性操作
//元素.属性
//元素['属性']
//元素.getAttribute('属性名')
//元素.setAttribute('属性名','属性值')
//元素.removeAttribute('属性名')

//自定义属性操作
//getAttribute
//setAttribute
//removeAttribute
  //元素.getAttribute('属性名'): 获取属性
  //元素.setAttribute('属性名','属性值'): 设置属性
  //元素.removeAttribute('属性名'): 删除属性

//H5自定义属性的操作 ( data-* )
//ele.dataset: 读写自定义属性
<body>
    <div id="box" data-my-id="me"></div>
    <script>
        var o_div = document.getElementById('box');
        console.log(o_div.dataset.myId); //'me'
    </script>
</body>

<div id="box" class="pox" title="标题" name="盒子" hehe="呵呵"></div>
<script>
    //获取元素对象
    var o_div = document.querySelector('div');
    // console.log(o_div.id,o_div.className,o_div.title,o_div.name,o_div.hehe);
    //获取元素的自定义属性
    console.log(o_div.getAttribute('name'),o_div.getAttribute('hehe'));
    //设置元素的自定义属性
    o_div.setAttribute('haha','哈哈');
    //删除元素的自定义属性
    o_div.removeAttribute('hehe');
    o_div.id = '';
</script>

<!-- data-  以这个开头
data-id  自定义ID属性
data-cart-id  自定义id属性 -->
<div id="box" data-my-id="呵呵"></div>
<script>
    //获取元素对象
    var o_div = document.querySelector('#box');
    console.log(o_div.dataset.myId)
    o_div.dataset.haha = '哈哈'; // 'data-haha="哈哈"'
    console.log(o_div.dataset.haha);
</script>

操作元素内容

//innerHTML: 设置或获取当前节点内容的内容 (超文本) (可以解析超文本的含义)
//innerText: 设置或获取当前节点内部的内容 (纯文本) (不能解析超文本)
//value: 设置或获取表单中的内容

<div id="box"><i>哈哈</i></div>
<input type="text" name="" id="">
<script>
    //获取元素对象
    var o_div = document.querySelector('#box');
    var o_txt = document.querySelector('input');
    // //添加内容
    // o_div.innerText = '呵呵';
    // //获取内容
    // console.log(o_div.innerText);
    // o_div.innerHTML = '<strong>呵呵</strong>';
    console.log(o_div.innerText);
    console.log(o_div.innerHTML);
    //添加内容
    o_txt.value = '内容';
    console.log(o_txt.value);
</script>