如何动态添加class样式

如何动态添加class样式,第1张

1

如果学WEB,w3school是一个非常有用的网站,总能找到你需要的东西。

2

如下图所示,这是w3school中对jquery属性 *** 作方法的介绍。

3

attr()可以设置和获取class属性。

设置:

$("img").attr("class","intro")

获取:

$("img").attr("class")

注:

attr()是将原有的class属性设置为新的class属性,不是在原来的基础上添加新的class属性。

4

那如果要在原来的class样式基础上添加新的样式要使用什么方法呢?

那就是addClass()方法。

5

addClass()可以添加一个或多个class属性。

添加一个class属性:

$("img").addClass("intro")

添加多个class属性:

$("img").addClass("intro1 intro2")//属性之间用空格分隔。

注:

当多class样式作用于一个元素上时,后添加的class样式会覆盖之前的。

6

示例:

$(document).ready(function(){ $("button").click(function(){$("p:first").addClass("intro1 intro2") })})

<style type="text/css">.intro1{font-size:120%color:red}.intro2{color:blue}</style>

<p>This is a paragraph.</p>

添加了两个class样式,后面的样式覆盖了之前的。所以字体显示是蓝色的。

反射,找父类的属性、方法,不难,Class 有方法

Class<? super T>

getSuperclass()

Returns the Class representing the superclass of the entity

(class, interface, primitive type or void) represented by this

Class.

思路为用addClass() 方法变可实现。

jquery中增加class属性步骤:

addClass() 方法:

定义和用法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $('p').addClass(function(n){

      return 'par_' + n

    })

  })

})

</script>

<style type="text/css">

.par_0

{

color:blue

}

.par_1

{

color:red

}

</style>

</head>

效果图:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11949895.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存