回答

收藏

如何使用 JavaScript 更改元素的类?

技术问答 技术问答 273 人阅读 | 0 人回复 | 2023-09-12

如何更改 HTML 元素类以响应onclick使用 JavaScript 事件或其他事件?
+ I& M! R# u7 S) I+ t                                                               
+ I& s3 y+ ]# x0 c$ [. H    解决方案:                                                                1 S! L+ @6 K0 v; c9 u' S0 K2 A' Z. j
                                                                现代 用于改变类别HTML5 技术添加了现代浏览器classList,在没有库的情况下,它提供了一些更容易操作的方法:
& ]3 z' h, p, D0 F% ~
    document.getElementById("MyElement").classList.add('MyClass');document.getElementById("MyElement").classList.remove('MyClass');if ( document.getElementById("MyElement").classList.contains('MyClass') )document.getElementById("MyElement").classList.toggle('MyClass');% ?9 n. }, |5 y
不幸的是,这些都在 v10 之前的 Internet Explorer 不起作用,虽然有一个shim可以为 IE8 和 IE9 可以从这个页面添加支持。然而,它得到了越来越多的支持。" n2 E6 m3 N6 H+ F6 R, k
简单的跨浏览器解决方案选择元素的标准 JavaScript 方式是 using document.getElementById("Id"),这是如下示例所用 - 当然,你可以通过其他方式获得元素,在正确的情况下可以简单地使用它们this- 但是,超出范围的答案被详细解释。; C: Z% i0 w7 w: f& ^* ]: e
所有要改变元素的类别:将所有现有类别替换为一个或多个新类别,请设置 className 属性:% M) ^8 D0 M8 f4 [: |4 C! x
    document.getElementById("MyElement").className = "MyClass";
    6 Z: t" Z: a- ^5 a7 P) j
(您可以使用空间分隔列表来应用多个类别。1 a, A  K# ^% L4 b. z
添加附加元素:在不删除/影响现有值的情况下,将类添加到元素中,请添加空间和新的类名,如下所示:
! @8 h& M6 s3 D) y+ n
    document.getElementById("MyElement").className  = " MyClass";- G  C; }5 R: k& R) k
删除元素中的一个类:在不影响其他潜在类别的情况下,需要简单的正则表达替换:
% d4 N! ^# @7 s# L' I
    document.getElementById("MyElement").className =   document.getElementById("MyElement").className.replace     ^|\s)MyClass(?!\S)/g ,'' )/* Code wrapped for readability - above is all one statement */
    # X$ w5 w  b* j; _. e- W
正则表达式的解释如下:
3 v9 E" I3 v1 j+ p8 p8 I
    (?:^|\s) # Match the start of the string or any single whitespace characterMyClass  # The literal text for the classname to remove(?!\S)   # Negative lookahead to verify the above is the whole classname         # Ensures there is no non-space character following         # (i.e. must be the end of the string or space)
    % b! i. l0 s  t) X* b/ {
该g根据需要重复标志告换,以防止多次添加类名。
, i; b: ~% \5 h检查一个类是否已应用于一个元素:同样的正则表达式也可以用来检查特定类是否存在:
  j! L2 Y  N1 a3 d8 p2 l) [
    - ^- N5 X) S% M) W- A) {/ S6 w
  • if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)())(/))(/))(/)(/))(/))(/))(/))(/)))(/)(/)))(/))(/)))(/)))(//)))(/))))(//)))/)(/)))//))(/)(/)/)/)/)/)//)/)//)/)//)/)//)//)//)//)//)//)/)//)//)//)//)//)///)//)//)//)//)///)///)///)///)///)///)///)///)///)///)////)////)///)///)///)//)///)//)///)//)//)//)/////)////)/)////////)/////)/)/////)///)/)///)/)//)/)///)////)///)/)////)/////)/)////)//)///)/)///)////)/)/)/)/)/////////)//)//)/)//////////)/////)/)////)//////)///////)/)//)//)//)////)///)/////)///////)/)///////)//////)/)/)/)/)/)/)////)////////)/)////////)/)//)/)/)/)/)//////////////////)/)/)//)//////)/////)/)////)/////)/)/)/)/)/////////////////)/code]### 将这些操作分配给  onclick 事件:
    * m! Z5 W4 t/ {4 K+ p( R
  • 虽然可以直接在 HTML 事件属性(例如onclick="this.className =' MyClass'")中编写 JavaScript,但不推荐这种行为。特别是在较大的应用程序中,通过 HTML 标记与 JavaScript 交互逻辑分离实现更可维护的代码。
    - v" q* x7 _0 w  j
  • 实现这一点的第一步是创建函数函数onclick 在属性中调用函数,如:[code]...My Button
    0 J$ P, x7 r- g* @1 i5 r/ t/ }
(这个代码不需要在脚本标签中,只是为了简化示例, JavaScript 可能更适合在不同的文件中包含。+ [4 F7 H: m: w0 E1 ?: T
第二步是 onclick 事件从 HTML 中移到 JavaScript 中,如使用addEventListener
( O9 x3 K1 ~0 _) \( m  n0 Q
    ...My Button2 ^. P8 b  C' q; T, \
(请注意,window.onload 部分必须用于 HTML 完成加载后执行函数的内容- 没有这个,调用 JavaScript 代码时 MyElement 可能不存在,所以行会失败。, X- _5 O5 H! y$ W7 [. G
JavaScript 框架和库上述代码均为标准 JavaScript,然而,通常的做法是使用框架或库来简化常见的任务,并从编写代码时可能不会想到的固定错误和边缘条件中受益。
, G* g# ?! u- i( P, T! l虽然有些人认为加一个大约50 KB 简单地改变一个类的框架是过度的,但如果你正在做很多 JavaScript 工作或任何不寻常的跨浏览器行为都值得考虑。
# p/ ~* {9 e1 G6 a; a(粗略地说,图书馆是为特定任务设计的一组工具,框架通常包含多个图书馆,并完整的职责。' _! x& }2 x. V9 X7 ?1 {/ h$ X$ y" {
上述示例已在下面使用jQuery进行了复制,这可能是最常用的 JavaScript 库(虽然还有其他值得研究的库)。
: T& V4 {' B9 d; q! ](注意$这里是 jQuery 对象。)& E& v8 V  A4 ~/ L
使用 jQuery 更改类:

    ) K! O# f3 ~* {* g# g
  • $('#MyElement').addClass('MyClass');$('#MyElement').removeClass('MyClass');if ( $('#MyElement').hasClass('MyClass)code]此外,jQuery 提供了添加不适用类或删除适用类的快速方法:[code]$('#MyElement').toggleClass('MyClass');
    , ~. `  x) t: ?* K: R( x
### 使用 jQuery 将函数分配给单击事件:
% |: q) d- }& v1 i
    $('#MyElement').click(changeClass);) K7 h# ]  a6 y
或者,不需要 id:' l5 i8 m8 R3 g( V  A
    $(':button:contains(My Button)').click(changeClass);
    - g+ T8 i9 |1 J7 ~# Q
分享到:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则