控制类名（className 属性）设置或返回class属性

最新推荐文章于 2020-01-23 14:12:22 发布
最新推荐文章于 2020-01-23 14:12:22 发布
阅读量303 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yongbin668/p/5592820.html
版权

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

结果:

任务

我们通过className属性来设置元素的样式:

1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。

2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" οnclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
          
	     p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>





转载于:https://www.cnblogs.com/yongbin668/p/5592820.html

weixin_30619101
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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> &#
Python编程之属性和方法实例详解
09-22
例如，`People`类中的`name`就是一个公有属性，可以通过`p1.name`来获取或设置其值。 ```python class People: def __init__(self): self.name = '张珊' ``` 2. 私有属性：以两个下划线`__`开头的属性被认为是...
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
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关键字后面的类名。
jQuery操作属性和样式详解
10-22
此方法可以用于获取或设置属性值，如`$("#element").attr("attributeName", "newValue")`。要删除一个属性，可以使用`.removeAttr("attributeName")`。但请注意，这仅影响元素属性，不会删除对应的DOM属性。 在处理...
DOM操作一些常用的属性汇总
09-03
- 语法：`Object.className = "class-name"` - 作用：用于设置或获取元素的CSS类，方便应用样式。 - 示例：给元素添加或更换类名，从而改变元素的样式表现。 - 注意：类名应符合CSS类名的命名规则，多个类名之间...
HTML 全局属性
01-19
规定元素的类名（classname） contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置...
浅析Java ClassName.this中类名.this关键字的理解
09-02
例如，在Android开发中，经常会在Activity的内部创建匿名内部类，如OnClickListener，这时我们需要用到`Activity.this`来引用Activity的实例，以便访问其成员方法或属性： ```java public class MyActivity extends...
JavaScript11 classname属性
zhiying_08的博客
11-12 341
.d1{ display: none; } .show{ width: 200px; height: 100px; background: gold; display: block; } 显示/隐藏 /*class 是保留字.保留字不能直接使用,所以添加class类名属性 * 使用className来表示 *  */ var btn=docu
第十一章 属性设置或返回元素的class 属性
闽南土著
04-27 434
语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 className属性     body{ font-size:16px;}     .one{   border:1px solid #eee;   width:230px;   heigh
JS之ClassName属性使用
weixin_30651273的博客
11-29 191
一、style与className属性的对比 在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。 ...
09 JavaScript DOM技术-className属性
苏伟雄个人博客
02-28 2955
className属性 一，calssName主要作用 className属性是一个可读可写的的属性，若只要是元素节点都有className属性，可以使用className属性得到一个元素的class属性并且还能用于赋值操作。这个操作可以用来为对应节点设置已有的CSS样式。 方式 element.className = value 二，优化className属性操作 通过上述介绍的方式来只有设置...
JavaScript第九章：className属性
里脊的博客
10-15 778
   与其使用DOM直接改变某个元素的格式，不如通过JavaScript代码去更新这个元素的class属性。    我们回顾下上一节中styleHeaderSiblings是如何添加样式的： function styleHeaderSiblings(){ if(!document.getElementsByTagName) return false; v...
className属性以及函数抽象
One of thre_tigers的博客
01-23 894
在之前的文章中，我们使用DOM方法进行了添加，修改，样式设置，更新属性…，但是我们不得不思考一个问题：JavaScript作为处理行为层的语言实现交互，然而我们却用来处理表示层的信息，那么JavaScript岂不是和CSS性质无异？我们想要更换某些元素的样式，就只能去设置函数更改与样式设置有关的语句。这不是最好的方法，也不是JavaScript的意义所在，**更高明的方法是：与其使用DOM直接改变...
js的className属性使用方法
HuangsTing的博客
10-30 8969
我们都知道通过className属性设置某个元素的class属性时将替换该元素原有的class设置。 如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。 elem.className += &quot; intro&quot;; //注意：intro的第一个字符是空格 为了方便使用，可以封装一个addName函数。这个函数带两个参数：第一个是需要...
javascript中ClassName属性的详解与实例
weixin_30463341的博客
07-04 327
在javascritp中，我们可以通过style属性可以控制元素的样式，从而实现行为层通过DOM的style属性去干预显示层显示的目标，但是这种方法是不好的，而且为了实现通过DOM脚本设置的样式，你不得不花时间去研究javascrip函数，去寻找对应修改和设置样式的有关语句。而且每次修改和添加JS脚本的工作量远远大于我们修改CSS属性的量。 与其使用DOM修改元素样式，不如使用函数去更新他的CL...
属性控制类
weixin_30300225的博客
04-02 107
属性控制类 [AttributeUsage(AttributeTargets.Class, Inherited =false)] [ComVisible(true)] publicclass ClassKeyAttribute : Attribute { public ClassKeyAttribute() { } ...
通过表名获取类名并返回 类.class
最新发布
06-09
className = className.replaceAll("_", "") + "Entity"; String packageName = "com.example.entity"; // 根据实际情况修改包名 String fullClassName = packageName + "." + className; return Class.forName...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值