JS — 02属性操作与样式操作1

最新推荐文章于 2020-06-19 00:08:41 发布

小郭呀~

最新推荐文章于 2020-06-19 00:08:41 发布

阅读量110

点赞数

分类专栏： JS上课笔记

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106697461

版权

JS上课笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

函数、typeof、取值和赋值、通过ID获取元素、注册事件、操作标签内容、操作标签属性、操作标签class类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
        div#wrap{
            width: 200px;
            height: 200px;
            background-color: #58a;
        }
        #wrap.skyblue{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="wrap" class="wrap"></div>
    <script>
        //内置对象
        console.log( window );
        console.log( document );

        /******************************************************************************/
        //函数 => 对象类型 => 把一堆代码装起来,这些代码不会立即执行,调用时才能执行
        function fun_a(){
            let x = 10,
                y = 20;
            console.log( x+y );
        }
        //函数调用方法之一
        fun_a();

        /******************************************************************************/
        /*
        *   所有数据类型
        *       基础数据类型
        *           Number
        *           String
        *           Boolean
        *           Undefined
        *           Null
        *
        *       复杂数据类型
        *           Object
        *
        *       ES6新增(基础数据类型)
        *           Symbol
        *           BigInt
        * */

        /******************************************************************************/
        //typeof:检测数据类型
        console.log( typeof 10 );//Number
        console.log( typeof "10" );//String
        console.log( typeof true );//Boolean
        console.log( typeof undefined );//Undefined
        console.log( typeof null );//Object (Null的类型就为Null)
        console.log( typeof [] );//Object
        console.log( typeof {} );//Object
        console.log( typeof window );//Object
        console.log( typeof function fa(){});//Function

        /******************************************************************************/
        let a = 10;//赋值
        console.log( a );//取值
        let b = a*2;//a => 取值  b => 赋值
        console.log( b );//取值

        /******************************************************************************/
        let obj_a = {
            name : "小郭",
            age : 20
        };
        console.log( obj_a.name );//对象取值 => obj.操作(属性)
        //console.log( obj_a.ab );//undefined => 取一个对象中不存在的属性时,会得到undefined,不会报错
        console.log( obj_a["name"] );//对象取值 => obj[数据] => 数据类型为字符串

        /******************************************************************************/
        /*
        *   得到对应的标签(获取元素/获取节点/获取标签),以用于后续的操作
        *   document.getElementById(""); => 通过id获取元素
        *  */
        let wrap = document.getElementById( "wrap" );
        /*
        *   注册事件:
        *       onclick 左键点击
        *       onmouseenter 鼠标移入
        *       onmouseleave  鼠标移出
        *
        * */
        wrap.onclick = function(){
            console.log( "鼠标左键点击啦" );
        };
        wrap.onmouseenter = function(){
            console.log( "鼠标移入啦" );
        };
        wrap.onmouseleave = function(){
            console.log( "鼠标移出啦" )
        };

        /******************************************************************************/
        /*
         *  操作标签内容:
         *      .innerText => 添加文字
         *      .innerHTML => 添加HTML内容
         * */
        wrap.innerText = "加点文字";
        wrap.innerText += "再加点新内容";// += => 在原有内容的基础上再添加内容
        wrap.innerHTML += "<h3>添加h3标签</h3>";// 在原有内容的基础上添加h3标签
        console.log( wrap.innerText );//取值,只能获取文本内容
        console.log( wrap.innerHTML );//取值,可以获取标签

        /******************************************************************************/
        let wrap2 = document.getElementById( "wrap" );
        //操作标签属性 (合法标签属性 => W3C规定的属性) (不合法属性 => 自定义属性)
        wrap2.title = "提示文字";
        //操作元素的class属性
        console.log( wrap2.className );
        console.log( wrap2.classList );
        wrap2.classList.add( "wrap2" , "wrap3" );//新添加class名
        wrap2.classList.remove( "wrap" );//删除class名
        wrap2.classList.toggle( "wrap2" );//有则删除,无则添加class名
        //操作样式
        //wrap2.style.backgroundColor = "pink";//通过行内样式修改元素样式
        wrap2.classList.add("skyblue");//通过添加类名,用CSS修改元素样式
    </script>
</body>
</html>