JS操作样式属性和JS事件_js使用事件对象操作元素样式-CSDN博客

本文链接：https://blog.csdn.net/dhnnnna/article/details/125549548

JS对元素内部结构的操作

innerHTML	获取元素内部的HTML结构、设置元素内容
innerText	获取元素内部的文本（只能获取到文本内容，获取不到html标签），可以设置元素内部的文本

JS中对元素属性的操作

getAttribute	获取元素的某个属性（包括自定义属性）
setAttribute	给元素设置一个属性（包括自定义属性）
removeAttribute	直接移除元素的某个属性

JS中对元素样式的操作

style	专门用来给元素添加 css 样式的，添加的都是行内样式
className	专门用来操作元素的类名的

<!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>
        .box1{
            width: 100px;
            background-color: red;   
        }

        .boxType{
            width: 100px;
            background-color: blue;   
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box1" name="张三">111</div>
        <div id="box2">2</div>
    </div>
</body>

<script>
    // // 元素对象.innerHTML 获取元素内部的HTML结构
    // //          innertext   获取元素文本
    // var box= document.querySelector("#box");
    //     // console.log(box.innerHTML);
    //     // box.innerHTML="<div> 你好 </div>"
        
    //     // console.log(box.innerTEXT);
    //      // box.innerHTML="<div> 你好 </div>"

        // 获取页面元素对象
        var box= document.querySelector("#box1");
        // 使用getAttribute方法获取元素的属性值
        var className=box.getAttribute("class");
        var name=box.getAttribute("name");

        // setAttribute  设置元素的属性值
        // remove        移除




</script>
</html>

JS事件

事件的三要素

事件源：网页上的元素。如：按钮，输入框等

事件类型：为用户或浏览器的行为。如：鼠标点击，选中输入框等

事件处理程序：事件发生后定义的程序。如：跳转网页、算数运算等。

给元素绑定事件

1.在DOM元素中直接绑定

2.在JavaScript代码中绑定

3.使用监听函数addEventListener() 绑定

给元素解绑事件

1. 直接删除法，使用“对象.οnclick=false;”

2.使用addEventListener绑定事件，使用removeEventListener删除绑定事件即可

常用的事件

onclick	鼠标单击时触发此事件
ondblclick	鼠标双击时触发此事件
onmouseover	鼠标移动到某个设置了此事件的元素上时触发此事件
onmouseout	鼠标从某个设置了此事件的元素上离开时触发此事件
onfocus	当某个元素获得焦点时触发此事件
onblur	当前元素失去焦点时触发此事件
onkeydown	当键盘上的某个按键被按下时触发此事件
onkeyup	当键盘上的某个按键被按下后弹起时触发此事件

<!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>
        /* #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px blue solid;
        } */
    </style>
</head>
<body>
    <div id="box1" name="123"></div>
<!-- 1.在DOM元素中直接绑定 -->
    <!-- <input type="button" value="新增元素" onclick="addElement()"> -->
<!-- 2在JavaScript代码中绑定 -->
    <input type= "button" id="btn_1" value="新增元素">

    获取焦点事件：<input type="text" id="input_1">

</body>
<script>

        // //实现在js代码中绑定事件
        // // 1、获取事件源对象，按钮
        // var button = document.querySelector("#btn_1");
        // // 2、绑定事件
        // button.onclick=function(){
        //     // alert("绑定成功");
        //         addElement();
        //     }
        //      // 解绑事件 有点问题  
        // button.onclick:false;



// 3.使用监听函数 addEventListener()绑定
        // 添加事件监听器
        var button = document.querySelector("#btn_1");
        
        button.addEventListener("click",addElement);
        button.addEventListener("click",changeColor);
        // 解绑事件
        // button.removeEventListener("click",addElement);

/*
对比绑定事件的三种方式
1、行内绑定
写在哪个标签上就是给哪个元素绑定事件
无法通过代码实现给多个元素同时绑定事件.
2、元素. onclick()
同一个元素相同的事件只能绑定一次， 后绑定的事件会执行
3、元素.addEventListener()
同一个元素可以添加多个事件监听器，都会执行，后添加的事件先执行
*/
        

// 焦点事件
// var input_1 = document.querySelector("#input_1");
// input_1.onclick=function(){
//             alert("绑定成功");
//                 addElement();
//             }






    // var box= document.querySelector("#box1");
    // alert(box.getAttribute("name"));
    // box.setAttribute("class","box");
    // // 修改页面元素样式  添加的是行内样式
    // box.style.border="0px blue solid"

    // // className  操作元素的类名
    

    function addElement(){
        var box=document.createElement("img");
       
        box.style.width="100px";
        box.style.height="100px"
        box. style. position="absolute";
        box. style. left=Math. random( )*1000+"px" ;
        box. style. top=Math. random( )*600 +"px";
        
        box.src="../作业/image百度/ic.jpg";
        var body = document . body;
        body . appendChild(box);

    }

    function changeColor(){
            var body=document.body;

            var R =Math. random( )*255;
            var G =Math. random( )*255;
            var B =Math. random( )*255;
            body.style.backgroundColor="rgb("+R+","+G+","+B+")";
        }


</script>
</html>