DOMjs获取样式（包括常用事件）

小白村第一深情

已于 2023-04-25 14:07:50 修改

阅读量1.2k

点赞数 1

分类专栏： js 文章标签： linq webview html js

于 2022-06-04 20:46:25 首次发布

本文链接：https://blog.csdn.net/ceike/article/details/125031663

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

四类js常用事件

鼠标事件：

左键单击 onclick

左键双击 ondblclick

鼠标移入 onmouseover onmouseenter

鼠标移出 onmouseout onmouseleave

鼠标按下 onmousedown

鼠标抬起 onmouseup

右键单击 oncontextmenu

onmouseup+οnmοusedοwn===onclick

键盘事件：

键按下 onkeydown onkeypress

键抬起 onkeyup

系统事件：

加载完成后 onload

家在出错后 onerror

窗口调整大小时 onresize

滚动时 onscroll

表单事件：

获取焦点后 onfocus

失去焦点后 onblur

改变内容后 onchange

重置后 onreset

选择后 onselect

提交后 onsubmit

<script>
        let box = document.querySelector(".box") ; 

        box.onclick =()=>{
            console.log("鼠标点击触发");
        }
        // box.ondblclick = ()=>{
        //     console.log("鼠标左键双击");
        // }
        // box.onmouseover  = ()=>{
        //     console.log("鼠标移入元素触发");
        // }
        // box.onmouseout  = ()=>{
        //     console.log("鼠标移出");
        // }

        // box.onmouseenter= ()=>{
        //     console.log("鼠标移入元素触发");
        // }
        // box.onmouseleave= ()=>{
        //     console.log("鼠标移出");
        // }

        // box.onmousedown =()=>{
        //     console.log("鼠标按下");
        // }
        // box.onmouseup =()=>{
        //     console.log("onmouseup");
        // }
       
        // box.oncontextmenu =()=>{
        //     console.log("oncontextmenu");
        // }
        
        // box.onmouseover = show
        // function show() {
        //     box.style.background = "green"
        // }
        // box.onmouseout = ()=>{
        //     box.style.background = "red"
        // }



    </script>

通过js获取对应的元素节点样式 => 能获取就代表能修改样式

*1. .操作符 => 获取元素样式

元素.style.样式名获取对应的样式

a. 只能获取行内样式

2. 获取内联样式与外联样式

getComputedStyle(元素节点).样式名返回一个style完整的样式表

3. 获取行内样式表

元素节点.style.cssText

通过js获取元素节点类名和id名操作类名和id名修改样式

*1. .操作符 => 获取类名和 id名

元素.className 获取类名

元素.id 获取id名

h5与 es5

1. 获取属性,获取自定义属性

元素.getAttribute("属性名") 返回属性值

2 设置属性,设置自定义属性

元素.setAttribute("属性名","属性值")

3 删除属性,删除自定义属性

元素.removeAttribute("属性名")

4 切换class类名

元素.classList.toggle("qqq")

元素存在对应class类名删除,否则反之

1.获取class类名

元素.classList

2.添加class类名

元素.classList.add(类名)单个

元素.calssList.add(不限制类名，类名)多个

3.删除class类名

元素.classList.remove(类名) 单个

元素.calssList.rmove(不限制类名，类名) 多个

关于能用css不用js操作

CSS和JS动画，那个的效率更好。_尼古拉斯-托尔斯泰-赵四的博客-CSDN博客

补充

1. 样式是通过连接符 - 连接的, 在js中获取就要小驼峰写法

js事件操作

利用函数事件（逻辑）实现点击按钮显示/隐藏

<!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>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <button class="but">点击隐藏</button>
    <div class="box" style="display: block;">内容</div>
    <!-- 
        事件=>行为=> 通过元素绑定条件执行相应的代码
        异步=>事件  定时器
        元素.onlick     鼠标点击事件
       逻辑：     给元素绑定了事件（鼠标物理点击元素后执行事件）
       元素.onclick=()=>{执行代码}
       元素.onclick=function(){执行代码}
       元素.onclick=函数名
       补充：三目赋值操作
       1.let qwe=1==1?"none":"block"
       2.简单效果能使用css实现，就用css
     -->
     <script>
         //点击but隐藏box元素   再次点击显示
         let box=document.querySelector(".box")
         let but=document.querySelector(".but");
         //点击but元素出发对应函数，执行内部代码
         but.onclick=show
         function show(){
             console.log(1);
             //执行代码
             if(box.style.display=="block"){
                 box.style.display="none"
             }else{
                 box.style.display="block"
             }
             //修改元素样式 -元素判断
             box.style.display=box.style.display=="block"?"none":"block"

         }

     </script>
</body>
</html>

小白村第一深情

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOMjs获取样式（包括常用事件）

包含隐藏展开功能 onmousedown===onclick *1. .操作符 => 获取元素样式元素.style.样式名获取对应的样式 a. 只能获取行内样式 2. 获取内联样式与外联样式 getComputedStyle(元素节点).样式名返回一个style完整的样式表
复制链接

扫一扫