Js中className的用法

最新推荐文章于 2024-03-15 16:56:39 发布
最新推荐文章于 2024-03-15 16:56:39 发布
阅读量3w 收藏 34
点赞数 13
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuanqianxue7096/article/details/88977367
版权

className可以用来改变标签元素的css类选择器，从而改变元素的样式

举个栗子

一个简单的无序列表，点击button之前ul的样式为uhh1

点击button后，调用check函数中的className将ul的样式由uhh1改为uhh2

<style type="text/css">
			.uhh1{color:#CCCCCC;font-size:12px;}
			.uhh2{color:#FF6600;font-size:24px;}
		</style>
		<script>
		function check()
		{
			var uul = document.getElementsByTagName("ul")[0];
			uul.className = "uhh2";
		}
		</script>
	</head>
	<body>
		<ul class="uhh1">
			<li><a href="#">首 页</a></li>
			<li><a href="#">新闻快讯</a></li>
			<li><a href="#">产品信息</a></li>
			<li><a href="#">联系我们</a></li>
			<br />
			<button onclick="check()">click me</button>
			
		</ul>
	</body>

效果如下：

蓝柚子邢邢
关注
  • 13
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript className 类名属性操作
猿码互联
05-29 228
需要注意的是，使用className属性进行类名操作会覆盖元素原有的类名，而使用classList属性进行类名操作则不会。因此，推荐使用classList属性来操作类名。在JavaScript中，可以通过className属性来操作HTML元素的类名。
使用 className 修改样式属性，web前端自学
最新发布
m0_57077948的博客
03-20 201
应注意在样式发生改变后，如果标签原本没有类名，则会执行完事件后添加进一个类名（刚才css中添加的），如果之前有类名，则会覆盖掉。(img-xusHRpfV-1710915873400)]当需要改变的属性样式较多时，使用此方法较为简便，讲义、实战项目、讲解视频**
className 还能这么用，你学会了吗
小陈的博客
12-31 1230
对于这个问题的解决就这样告一段落了，虽然看起来比较简单（一个动态设置类名），但是通过这个className的灵活使用，让我对className的用法有了更进一步的掌握，也不得不感叹组件化思想的广泛运用，这里最大程度地将组件化思想通过className发挥出来。因此，希望通过这个问题，来学会className的灵活用法，并理解好组件化思想。当然如果大家还有更好的解决方案的话，欢迎在评论区告诉我。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。
JavaScript的className的用法
liulang68的博客
07-09 4146
className是类别选择器的名字，使用这个className可以进行动态更改某个标签的类的属性值。例如： 简易版的 运行后，直接显示为，类的属性值改变后的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>className的使用</title> <style type="text/css">
JS-10 元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
qq_54075517的博客
06-06 1390
元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
JavaScript之ClassName属性学习
weixin_34208283的博客
08-10 632
     在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。 所以与其使用DOM直接改变莫个元素的样...
样式操作（className)
gebieren的博客
09-30 900
通过className属性对元素的类名进行操作。 通过HTML5新增的classList属性对元素的类名进行操作。 通过Style属性设置元素的行内样式。 通过getComputedStyle方法获取元素的计算后样式。 通过offset系列，scroll系列，client系列属性来操作元素的组合样式。 ClassName操作 说明：通过ClassName操作元素的类名是最简单的方式，但是如果仅仅想增加或者删除某一个具体的类名的时候，不是特别方便。 ClassList属性 说明：使用classList.
className多种样式的三种写法
weixin_44160385的博客
05-20 2629
1、 className 利用 ${ } className={`${style.fruit} ${style.apple}`} 2、 className join className={[style.fruit,style.apple].join(' ')} 3、利用classnames库 npm install classnames --save <div className=classnames({ 'class1': true, 'class.
js通过classname来获取元素的方法
10-21
在JavaScript中，获取具有特定类名（classname）的元素是一项常见的任务，特别是在DOM操作和页面交互中。在原生JavaScript中，有多种方法可以实现这一功能。本文将详细讲解通过类名获取元素的方法，并提供相应的代码...
JavaScript中setAttribute用法介绍
10-27
总的来说，`setAttribute()`是JavaScript中处理元素属性的重要工具，但使用时必须考虑到浏览器的兼容性问题。对于CSS类，需要同时处理Firefox和IE的不同需求；对于方法属性，尤其是事件属性，应该优先使用点符号法来...
JavaScript 拾碎[三] 使用className属性
12-08
总之，JavaScript的`className`属性是实现动态CSS样式改变的重要工具，它使我们能够在用户的交互事件中轻松地添加、移除或切换元素的类，从而改变元素的视觉表现。理解并熟练运用这个属性，能极大地提升网页的用户...
javascript通过className来获取元素的简单示例代码
10-26
通过`getElementsByClassName`方法（注意，原生JavaScript中没有`getElementsByClassName`，但这里自定义了一个类似的函数），我们可以根据类名筛选并操作元素集合。在实际开发中，这种方法常用于实现动态交互效果，...
JavaScript实现获取dom中class的方法
12-09
本文将深入讲解如何使用JavaScript实现获取DOM元素中class的方法。 首先，我们来分析提供的代码实例。在示例中，定义了一个名为`getClass`的函数，它接受两个参数：`node`代表要查询的DOM元素，`classname`是要找的...
js控制样式属性： className与classList
m0_63758097的博客
03-15 530
因此为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。获取或设置指定元素的 class 属性的值。这可以用于操作 class 集合。是一个只读属性，返回一个元素。
对话框程序设置Class Name
成长伴随牢骚
08-28 1250
一般对话框程序不能在VC的资源编辑器里设置/修改Class Name，对话框属性的Class Name为不可用状态。但可以通过稍作修改，来达到设置对话框Class Name的目的。1. 在资源view中，右键单击*.rc，点属性，修改MFC Mode为false；2. 在看对话框的属性设置中，Class Name属性已经变成可编辑的状态了，设置好Class Name后保存；3. 在创建
类名.class.getName()的作用
热门推荐
lycIT的博客
12-13 1万+
类名.class.getName()的作用是获取这个类的全类名！ 如在cn.lz.life.common.redis包下有个类 public class RedisService { protected static final Logger log = LoggerFactory.getLogger(RedisService.class.getName()); public Redi
js动态添加classname
猫的部落格
01-29 1989
今天无疑在qq拍拍源码上看到一串这样的代码可以动态添加classname觉得不错就抄了下来 &lt;script type="text/javascript"&gt; window.onload = function () { var ulBox = document.getElementById("content"); var list = ulBox.getElementsByTagNam...
JS实现给对象添加className.
qq_38384536的博客
06-28 2248
利用函数返回值
js中利用什么方法可以删除节点的className
05-24
可以使用Element对象的classList属性，通过调用其remove方法来删除节点的className。 示例代码如下： ```javascript // 获取节点 const node = document.getElementById('some-node'); // 删除className node.classList.remove('class1', 'class2', 'class3'); ``` 上述代码中，`classList`表示节点的classList对象，`remove`表示删除指定的className，可以同时删除多个className。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值