day3 操作各种属性和样式

一个节点对象初始就有很多属性和方法,这些属性和方法是JavaScript原本就赋予给这个对象的,我们要做的就是操作这些属性或者方法,那操作就分读取


一.JavaScript标签属性

标签属性是我们学过的一些标签属性 id class name type等等的

1.标签属性(合法标签属性)   id class name...

    1.操作方式通过链式 点操作

        <div id="wrap" class="content"></div>

        <script>

                let oDiv = document.getElementsByTagName("div")[0]

                oDiv.id = "list" //更改元素的ID名

        </script>

       2.特殊属性 class  操作的时候是 className

                  src属性不能拿来做判断

                   color不能做判断

            <div id="wrap" class="content"></div>

            <img src=""></img>

            <script>

                    let oDiv = document.getElementsByTagName("div")[0]

                    oDiv.className = "list" //更改元素的class类名

                    let oImg = document.getElementsByTagName("img")[0]

                    console.log(oImg.src)//我们添加的是一个相对路径,打印的却是一个绝对路径

            </script>

        3.变量被赋值这个对象节点之后,这个节点对象其他属性发生改变,这个变量还是代表这个获取的对象

            <div id="wrap" class="content"></div>

            <script>

                    let oWrap = document.getElementById("wrap")

                    oWrap.className = "list" //更改元素的class类名

                    oWrap.innerHTML = 123

                    let aContent = document.getElementsByClassName("content")

                    aContent.id = "text"

                    aContent.innerHTML = 456

            </script>

        4.变量被赋值这个对象节点之后,这个节点对象此属性发生改变

      (1)静态获取  getElementById      querySelector       querySerletorAll

            改变此对象属性值之后,获取该对象的变量依然可以使用,不会因为改变赋值对象节点对应属性而无法使用

            <div id="wrap" class="content"></div>

            <script>

                    let oWrap = document.getElementById("wrap")

                    oWrap.id = "list"

                    oWrap.innerHTML = 123

            </script>

      (2)动态获取 getElementsByClassName     getElementsByTagName       getElementsByName

            改变此对象属性值之后,获取该对象的变量不可以使用,因为改变赋值对象节点对应属性而无法使用

        <div id="wrap" class="content"></div>

        <script>

                let oContent = document.getElementsByClassName("content")[0]

                oWrap.className = "text"

                oWrap.innerHTML = 123//不会生效

        </script>

动态获取解决办法:

        转换地址  单独处理放在一个变量中

        <ul>

            <li class="list"></li>

            <li class="list"></li>

        </ul>

        <script>

               let aList = document.getElementsByClassName("list")

                let x = aList[0]

                aList[0].className = "text"

                aList[0].innerHTML = 123

                x.innerHTML = 456

        </script>

2.标签自定义属性(不合法属性)

标签不具有的属性,程序员人为添加的属性

<div id="wrap" class="content" marray="no"></div>

<script>

        let oContent = document.getElementsByClassName("content")[0]

        oContent.age = "18"

        console.log(oContent.marray) //undefind

</script>

(1)添加自定义属性 setAttribute("属性名","值")

<div id="wrap" class="content"></div>

<script>

        let oContent = document.getElementsByClassName("content")[0]

        oContent.setAttribute("age",18)

</script>

(2)得到自定义属性 getAttribute("属性名")

<div id="wrap" class="content" marray="no"></div>

<script>

        let oContent = document.getElementsByClassName("content")[0]

        console.log(oContent.getAttribute("marray"))

</script>

(3)移除属性名 removeAttribute("属性名")

<div id="wrap" class="content" marray="no"></div>

<script>

        let oContent = document.getElementsByClassName("content")[0]

        oContent.removeAttribute("marray")

</script>


二、JavaScript对象属性

对象属性是我们JavaScript内置的一些属性,像我们的 innerHTML 各种事件等等

1.对象自带属性

    console.dir() 查看对象自带的js属性

<div></div>

<script>

        let oDiv = document.getLementsByTagName('div')[0]

        console.dir(oDiv)//查看对象自带的JS属性

</script>

2.对象自定义属性

    内置的JS对象上不具有的,我们自己添加的,通过console.dir也是能打印出来的

    对象.属性名 = 值

<div></div>

<script>

        let oDiv = document.getLementsByTagName('div')[0]

        oDiv.love = "dajia"

        console.dir(oDiv)//查看对象自带的JS属性

</script>


三.+号的初步认识

 +号

                1.数字相加还是数字(number)

                2.字符串相加叫拼接

                3.+=   X=X+1

                        X+=1

                4.变量在已经赋值使用时 不能加引号包裹(字符串)

                5.字符串和变量拼接 引号一定要前后配对 变量前后是加号作为分割点

            ES6:

                模板字符串

                    `内容${变量}内容`

    <style>

        #wrap{

            width: 100px;

            height: 100px;

            background-color:pink;

        }

    </style>

    <div id="wrap"></div>

    <script>

        let x = '1'

        let y = 2

        console.log(x+y)

        let oWrap = document.getElementById("wrap")

            oWrap.onclick = function() {

                //oWrap.innerHTML += 123

                //oWrap.innerHTML += "<p></p>"

                //oWrap.innerHTML += "<p>" + y + "</p>"

                //oWrap.innerHTML += "<p style= 'width:200px;background-color:red;'>" + y + "</p>"

                oWrap.innerHTML += `<p style= "width:200px;background-color:red;">${y}</p>`

            }

    </script>


四.css样式操作

1.改变元素样式方法外部样式 内部样式 行内样式

    外部样式:单纯的JS不能操作外部样式

    内部样式:JS可以操作HTML页面任何元素,可以操作style标签

    行内样式:JS操作元素样式最常用方法,标签的自带属性style 通过点操作 元素.style.css属性 = "属性值"

<div id="wrap">123</div>

<script>

            let oWrap = document.getElementById("wrap")

            oWrap.style.color = "red"//单个属性

            oWrap.style.cssText = "font-size:25px;font-weight:bold;"//多个属性

</script>

注意:

    1.分样式用驼峰写法

    <script>

            oWrap.backgroundColor = "blue"

    </script>

    2.个别样式有兼容以及保留字css属性

    <script>

            oWrap.style.cssFloat = "right"

    </script>

2.通过添加类名改变样式

可以在内部样式把css样式写好,通过添加类名的方式

   <style>

       #wrap{

            width: 100px;

            height: 100px;

            background-color:pink;

        }

    </style>

    <div id="wrap"></div>

    <script>

        // oWrap.onclick=function(){

        // oWrap.className="content"

        // }

==

        oWrap['onclick']=function(){

            oWrap.className="content"

        } 

    </script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容