JS点击后变换样式 , 元素的作用域案例 , 借助元素本身的属性,

最新推荐文章于 2022-05-24 21:38:51 发布
最新推荐文章于 2022-05-24 21:38:51 发布
阅读量268 收藏
点赞数
分类专栏： JS Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Byte_Dance/article/details/79447560
版权
本文探讨了JavaScript中元素作用域的问题，特别是在点击事件中如何正确管理和使用全局变量以避免数据随元素内容变化。通过示例展示了如何利用元素属性实现标题的点击切换效果，同时强调了自变量和存储数据应置于函数外部以保持其作用域不变。
摘要由CSDN通过智能技术生成 
//这里要把获取的数据存储放置到点击事件的外部作为全局变量,不然数据是会跟随这个
元素的内容而改变的,自变量和存储的数据都要放置在函数外部,这里要注意的是变量的作用域
j=0;  //自变量
v = $(" #h2").text();  //获取到的原标题

$("#按钮").click(function(){

    if(j%2
最低0.47元/天 解锁文章
Byte_Dance
关注
专栏目录
MATLAB算法实战应用案例精讲-【深度学习】多尺度特征融合-目标检测（论文篇五）
qq_36130719的博客
04-15 1609
检测的图像，首先设置输入网络大小，然后将滑动窗口按照一定步长对图像进行滑动，微小的卷积神经网络，其使用卷积核在卷积神经网络中对输入图像信息进行卷积处理，传统行人检测技术进行分析，然后介绍基于深度学习行人检测算法，为后续行人检测。出，能够很好的描述行人的边缘，因此广泛应用于行人检测。的静态图像，往往采用梯度直方图方法获取行人图像的局部特征信息，然后计算所有。个单元格的特征将以不同的结果出现在最后的向量中，所有的小单元特征信息将构成。目的成果，使得行人检测检测技术成为基于深度学习目标检测领域的研究热点。
HTML+CSS基础自制笔记
Kyrie_irving_kun的博客
08-04 3544
一、HTML笔记 文章目录一、HTML笔记初识标签标签语义标题标签：段落标签：换行标签：文本格式化标签：盒子标签：图像标签和路径：超链接标签：注释标签：常用特殊字符：表格标签：表头标签：常用表格属性：表格结构标签：合并单元格：合并步骤：列表标签：无序列表（重要）有序列表（理解）自定义列表（重点）表单标签：input标签：其他属性：labal标签：select标签：textarea标签：二、CSS笔记CSS简介：声明常用属性：CSS基础选择器：1.标签选择器2.类选择器3.id选择器4.通配符选择器字体属性：
JS改变元素样式
07-22
JS改变元素样式
JS获取元素和操作，作用域，声明提升，this，自执行函数
qq_37987993的博客
07-09 308
一、获取元素 getElementById('元素id名') getElementsByTagName('元素标签名') getElementsByClassName('元素类名')(IE678不支持) document.querySelector('css选择器') document.querySelectorAll('css选择器') 获取元素的值：表单元素是使用：元素.value 非表单元素使用：元素.inn...
改变某个元素属性值的方法
AndrewNeo
04-01 6649
第一种： element.value = "this new value"; 第二种： element.setAttribute("value","the new value"); 案例一： <!-- 改变某个元素属性值的方法 --> <img id="targetPic" src="images/coffice.jpg" alt="&
js中改变元素的属性
努力的zhiyi
06-11 6472
js中改变元素属性的方法     1、js中改变元素的属性值        格式：某元素.style.某属性 = '改变值';        例如：oDiv.style.width = '300px';        在js中如果遇到类似font-size这种属性，需要将其写为fontSize，在对它的值进行改变 2、js中改变元素的浮动值时会遇到兼容性的问题         IE情况
js实现点击改变元素样式
weixin_42630877的博客
10-16 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js重温</title> </head> <p id="www">1111</p>
04-WebApl
人俗话不多
03-08 643
Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api ​ MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对 于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...
1. Vue从入门到精通（第一章 vue核心）
cjhxydream的博客
05-24 2905
Vue基础1. Vue简介1.1 Vue是什么？1.2 Vue的作者以及迭代版本1.3 Vue的特点2. 搭建Vue开发环境2.1 安装Vue的方式2.1.1 第一种安装方式：直接使用1. Vue简介 1.1 Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 构建用户界面：将数据变成用户可以看到的界面 渐进式：是指Vue可以自底向上逐层的应用 对于简单应用，只需要轻量小巧的核心库 对于复杂应用，可以引入各种Vue插件 1.2 Vue的作者以及迭代版本 1.3 Vue
JS 修改元素属性的六种方式
热门推荐
boonyaxnn的博客
04-04 3万+
方式一、 1.setAttribute 描述：设置元素的【属性】 语法：元素名.setAttribute('属性','属性值'); 例子： box.setAttribute('style','background-color:red;height:400px'); 注意：设置的是行内样式 2.getAttribute 描述：获取属...
有作用域的css
DayDreamWMM的博客
09-17 3273
初接触Vue单文件，对style标签里的scoped属性难免有一点困惑，毕竟之前没有用到过，下面是关于scoped的一些讲解。 一个标准的.vue文件是这样的： // html内容区域 <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </templ..
js 修改svg样式、动态加入DOM元素、添加事件响应函数
ZQ的专栏
01-27 8901
svg是xml格式的语言，就算在dom里看上去已经加上了，但是还是不能被识别出来的。 https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink
js设置样式的三种 常用方式及其点击实现样式切换
weixin_49766692的博客
03-15 5686
css文件 需要什么就写什么 例如： div{ width: 200px; height: 200px; border: 1px solid ; } .active{ border: 10px solid mediumorchid; } .test{ background:linear-gradient(to bottom right,red,orangered,lawngreen,yellow,green); } HTML
前端学习（820）：操作元素
歌谣的博客
04-11 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
原生js写点击事件改变字体颜色
Mr_Jindaniu的博客
02-12 1万+
最近一直有想法想把博客和公众号搞起来，但是一直没什么头绪，今天就先简单的给大家带来一个比较基础的原生Js 点击改变元素样式的一个小demo，代码如下： html及css样式： *{ margin:0; padding:0; list-style:none;} li{ float:left; width:100px; height:45px; display:inline-b
深入解析JavaScript作用域与作用域链
"理解JavaScript作用域和作用域链" 在JavaScript编程中，作用域是一个至关重要的概念，它决定了变量和函数的可访问性以及它们的生命周期。JavaScript中的作用域分为全局作用域和局部作用域。 1. 全局作用域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值