DOM的事件函数this和className等样式注意点

最新推荐文章于 2023-09-07 18:50:20 发布
最新推荐文章于 2023-09-07 18:50:20 发布
阅读量2.2k 收藏
点赞数
分类专栏： js / jq / vue 文章标签： javascript css class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yual365/article/details/6783985
版权
事件中的this，除了可以使用event.srcElement在事件中响应函数中，this表示发生事件的控件，只有在事件响应函数才能使用this获得相应事件的控件，在事件响应函数中调用的函数中不能使用，如果要使用调用的函数中使用要将this传递给函数或者使用event.srcEvent才行，(*)this和event.srcEvent的语义是不一样的，this表示当前监听事件的这个对象，event.srcElement是引发事件的对象，比如冒泡时间 
修改元素的样式不是设置calss属性，而是className属性
单独修改样式的属性使用“style.属性名”，注意在css中属性名在javascript中操作时属性名可能不一样，主要在那些属性名中含有-的属性，因为javascript中-是不能做属性、类名的，所以css中背景颜色是background-color，而在javascript则是style.background,元素样式名class在javascript中是className属性，font-size->style.fontSize,margin-top->style.marginTop
胖胖爱家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
this.className
lq_bc的专栏
07-20 558
CSS鼠标放上去改变背景色([color=red]this.className[/color]) .cls_hover { background-color: #dddddd; } .cls_normal { background-color: #ffffff; } xxxxxxxxxx
this.className的使用
after_you的博客
12-22 5627
onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。 onmouseover="this.className='menu_title2';"是鼠标移到该单元格上去时应用的css样式为“.menu_title2”的样式 onmouseout="this.className='menu_title';"是鼠标离开单元格后应用的css样式为“.menu_
DOM(10)——this
qq_34573534的博客
08-18 209
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。 this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcE...
JQuery 课时17：JQuery事件对象
qq_42221321的博客
07-05 83
Query 课时17：JQuery DOM属性概要1、addClass(className)：为每个匹配元素添加指定的样式类名2、attr（attrbuteName）：只有一个参数时，获取匹配的元素集合中的第一个元素的属性值；有两个参数时设置每一个匹配元素的一个或多个属性3、hasClass(className):确定任何一个元素是否有给定到某个（样式）类4、.html() 当没有参数时为获取当前的内容，两个参数时为添加页面内容5、prop()6、removerattr()7、removeClass()8、
用this.className或this.classid来实现下拉菜单或下拉列表的显示是如此的简单
weixin_30487701的博客
04-21 261
今天来教大家一个很简单的实现下拉菜单或下拉列表的效果，这种效果一般的情况下大家会去写一大堆的JS或者jQuery代码，很是不方便，今天的方法很简单，只用一个this.className=''这样一个代码就可以实现了。 先看一下效果： HTML代码： <div id="category-2015" onmouseover="this.className='on'" onmouse...
Javascript 检测、添加、移除样式(className)函数代码
11-30
在JavaScript中，操作DOM元素的CSS类（class）是常见的任务，这有助于动态改变网页的样式和交互。这里，我们有三个实用的函数：`hasClass`、`addClass`和`removeClass`，它们分别用于检测一个元素是否具有特定的样式...
jQuery操作属性和样式详解
10-22
在JavaScript中，我们可以直接访问DOM属性，如`document.getElementById("hibiscus").alt`和`img1.className`。 jQuery提供了一些方便的方法来操作DOM属性。使用`.each()`函数，我们可以遍历jQuery对象集合并对每个...
推荐4个原生javascript常用的函数
12-09
这些原生JavaScript函数在实际开发中非常实用，它们可以帮助开发者更高效地处理DOM事件、样式和类名操作，同时确保了良好的浏览器兼容性。熟练掌握这些函数，可以使JavaScript代码更加简洁和高效，提升开发效率。
jQuery使用toggleClass方法动态添加删除Class样式的方法
10-24
在jQuery库中，`toggleClass()`方法是一个非常实用的功能，它允许开发者在元素上动态地添加或删除CSS类，实现元素样式的切换。这个方法的主要作用是根据元素当前是否具有指定的Class来决定是添加还是移除该Class。...
DOM和this指向
HAI6545的博客
01-07 649
DOM ---- 一套操作html文档的标准 - 操作标签的方法 1.获取标签元素 /*document.getElementById(id名) document.getElementsByTagName(标签名) document.getElementsByClassName(类名) document.getElementsByName(name属性的值) document.querySelector(css选择器) document.querySelectorAll(css选择器) */ 2.属性
DOM——事件对象，this
Meat_doll的博客
07-20 148
来自上课讲的知识点，如有雷同可能是同学
034JS-this.className类名改样式
Gy_9543的博客
07-22 390
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
javascript系列之className属性
最新发布
StayAlive1887的博客
09-07 761
className是一个Element接口中的属性，它可以获取和设置一个HTML元素的class属性值。它会返回一个字符串，代表了HTML元素的class属性，如果一个HTML元素有多个class，它也会一并返回。</</</</</</</tmp🍺 🎶倘若一个元素是SVGElement，className同样可以是SVGAnimatedString的一个实例。
DOM事件绑定的this问题
06-15 1189
先上几道面试题（我们公司面试前端的） 1. <input id="name" type="text" value="name" onclick="alert(this.value);" /> <input id="name" type="text" value="name" value="Laruence" /> function showValue() { alert(this); }; document.getElementById('name').onclick
DOM事件中this的指向问题
hhhhhh__hh的博客
05-05 938
几种DOM事件绑定方式下的this指向 1 通过在标签中指定 方法1： <script> function test() { console.log(this); } </script> <button onclick="test()">点我</button> 结果指向window对象 方法2：将this传递给事件处理函数 <button onclick="test(this)">点我</butto
DOM操作 以及this 与new
InLett_yj的博客
08-02 361
DOM:是指 文档对象模型 主要是指用来操作html文档 (Doucument Object Model) DOM 节点操作 操作DOM树 所有的节点都有父节点, 只有一个节点没有父元素(根节点)html 一个节点可以有多个子节点,但一个节点有且只有一个父节点 this 与 new 在function我们会经常遇到this，下面总结了一些规律来判断this的对象是谁： 全局作用域中的thi...
js-className基本用法
唐昊
03-21 540
<!DOCTYPE html> <html> <head> <title>test</title> </head> <script type="text/javascript"> window.οnlοad=function(){ var btn = document.getElementById(...
利用js更改类名（className）来更改样式不起作用
Yss915的博客
07-08 2735
原因可能是更改的类名优先级不够 可以在css中将相应类名前加上父类名来提升类名的优先级，例如 .xb li{ float: left; margin-right: 10px; border: 10px solid rgb(104, 102, 102); border-radius: 50%; } .xb .yes{ border-color: brown; } .xb .no{ border-color: rgb(104, 102, 102); } xb即为父类名
js--5.事件-3.事件对象event
村西头的俏寡妇
02-05 190
1      事件对象 1.1  产生 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,     在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。   1.2  实现兼容 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
headers.forEach(function(dom){ headers.forEach(function(dom){ dom.className='';})函数里面的dom是什么意思和calssName是什么意思
07-09
在这段代码中，`dom` 是一个函数参数和变量名，用于表示数组 `headers` 中的每个元素。 `headers.forEach(function(dom) { })` 是一个遍历数组 `headers` 的方法，其中的回调函数接受一个参数 `dom`，表示当前迭代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值