JavaScript11 classname属性

最新推荐文章于 2023-09-07 18:50:20 发布
最新推荐文章于 2023-09-07 18:50:20 发布
阅读量341 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiying_08/article/details/78513986
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1{

display: none;
}
.show{
width: 200px;
height: 100px;
background: gold;
display: block;
}
</style>
</head>
<body>
<button id="btn">显示/隐藏</button>
<div class="d1"></div>

<script type="text/javascript">
/*class 是保留字.保留字不能直接使用,所以添加class类名属性
* 使用className来表示
* 
*/
var btn=document.getElementById("btn");
var div1=document.getElementsByTagName("div")[0];
//通过className设置元素的类名 让元素加载对应类名的选择器里的样式
var isHide=true;
btn.οnclick=function(){
if(isHide){
div1.className="show";
}else{
div1.className="d1";

}
isHide=!isHide;
};


</script>



</body>
</html>
zhiying_08
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript className 类名属性操作
猿码互联
05-29 210
需要注意的是，使用className属性进行类名操作会覆盖元素原有的类名，而使用classList属性进行类名操作则不会。因此，推荐使用classList属性来操作类名。在JavaScript中，可以通过className属性来操作HTML元素的类名。
JavaScript 拾碎[三] 使用className属性
10-28
Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。
create-class-names:扩展classNames对象的值的实用程序
05-11
创建类名 一个实用程序，用于定义用于向React组件中的嵌套元素分配自定义className的API。 对于全局样式，css模块和css-in-js很有用。 注意：这不能替代非常棒的库。 它应与类名结合使用。 将此库视为组合类名用法的一种方法。 这是什么？ 通常，React开发人员将手动向其React Component公开一个className属性，以允许该组件的用户自定义样式。 同样，使用来连接这些也很常见。 function Banner ( props ) { const { children , className } = props ; return ( < div xss=removed> < span xss=removed> &#
3.控制类名（className 属性）
weixin_33966095的博客
03-06 395
className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变className： 结果: 转载于:https://www.cnblogs.c...
JavaScript—className 属性
JAVA那些事
07-28 1682
定义和用法 　　className 属性设置或返回元素的 class 属性。 语法 object.className=classname 实例 　　本例展示了两种获得 元素的 class 属性的方法：<html> <body id="myid" class="mystyle"><script type="text/javascript"> x=document.getElementsByT
JavaScript第九章：className属性
里脊的博客
10-15 778
   与其使用DOM直接改变某个元素的格式，不如通过JavaScript代码去更新这个元素的class属性。    我们回顾下上一节中styleHeaderSiblings是如何添加样式的： function styleHeaderSiblings(){ if(!document.getElementsByTagName) return false; v...
javascript系列之className属性
最新发布
StayAlive1887的博客
09-07 725
className是一个Element接口中的属性，它可以获取和设置一个HTML元素的class属性值。它会返回一个字符串，代表了HTML元素的class属性，如果一个HTML元素有多个class，它也会一并返回。</</</</</</</tmp🍺 🎶倘若一个元素是SVGElement，className同样可以是SVGAnimatedString的一个实例。
javascript通过className来获取元素的简单示例代码
10-26
在JavaScript中，`className`属性是一个非常实用的特性，它允许我们操作HTML元素的类（class）名。本文将深入探讨如何使用`className`来获取和处理元素，并提供一个简单的示例代码作为参考。 首先，我们需要理解`...
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
用JavaScript修改CSS属性的代码
12-03
用JavaScript修改CSS属性 只有写原生的javascript了。 1.用JS修改标签的 class 属性值： class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也...
09 JavaScript DOM技术-className属性
苏伟雄个人博客
02-28 2955
className属性 一，calssName主要作用 className属性是一个可读可写的的属性，若只要是元素节点都有className属性，可以使用className属性得到一个元素的class属性并且还能用于赋值操作。这个操作可以用来为对应节点设置已有的CSS样式。 方式 element.className = value 二，优化className属性操作 通过上述介绍的方式来只有设置...
js的className属性使用方法
HuangsTing的博客
10-30 8969
我们都知道通过className属性设置某个元素的class属性时将替换该元素原有的class设置。 如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。 elem.className += &quot; intro&quot;; //注意：intro的第一个字符是空格 为了方便使用，可以封装一个addName函数。这个函数带两个参数：第一个是需要...
控制类名（className 属性）设置或返回class属性
weixin_30619101的博客
06-11 303
控制类名（className 属性） className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得 <p> 元素的 class 属性和改变c...
javascript中ClassName属性的详解与实例
weixin_30463341的博客
07-04 327
在javascritp中，我们可以通过style属性可以控制元素的样式，从而实现行为层通过DOM的style属性去干预显示层显示的目标，但是这种方法是不好的，而且为了实现通过DOM脚本设置的样式，你不得不花时间去研究javascrip函数，去寻找对应修改和设置样式的有关语句。而且每次修改和添加JS脚本的工作量远远大于我们修改CSS属性的量。 与其使用DOM修改元素样式，不如使用函数去更新他的CL...
HTML DOM className 属性
yangxiuen的博客
05-17 183
[size=large]定义和用法 className 属性设置或返回元素的 class 属性。 语法 object.className=classname实例 本例展示了两种获得 元素的 class 属性的方法： x=document.getElementsByTagName('body')[0]; document.write("Body CSS clas...
es6 Class 的 name 属性
歪脖先生的博客
02-01 943
Class 的 name 属性 由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。 class Point {}Point.name // "Point" name属性总是返回紧跟在class关键字后面的类名。
JS之ClassName属性使用
weixin_30651273的博客
11-29 191
一、style与className属性的对比 在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。 ...
className属性以及函数抽象
One of thre_tigers的博客
01-23 894
在之前的文章中，我们使用DOM方法进行了添加，修改，样式设置，更新属性…，但是我们不得不思考一个问题：JavaScript作为处理行为层的语言实现交互，然而我们却用来处理表示层的信息，那么JavaScript岂不是和CSS性质无异？我们想要更换某些元素的样式，就只能去设置函数更改与样式设置有关的语句。这不是最好的方法，也不是JavaScript的意义所在，**更高明的方法是：与其使用DOM直接改变...
js通过Class Name获取一个对象的数组
热门推荐
wuhen8的专栏
11-02 1万+
DOM 提供了一个名为 getElementById() 的方法，这个方法将返回一个对象，这个对象就是参数 id 所对应的元素节点。另外，getElementByTagName() 方法会返回一个对象的数组，每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题，能不能通过标签的类名class name来获取该对象呢？下面是这个猜想的程序实
classname属性
05-12
使用classname属性可以通过JavaScript代码来访问和操作具有相同class属性值的元素。例如，可以使用document.getElementsByClassName('myClass')来获取所有class属性为'myClass'的元素，并对它们进行操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值