DOM系列:样式和类

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

对于任何一位Web开发者而言,处理CSS样式很多时候还是会借助JavaScript。简单的说,我们会碰到一些交互(或UI效果的变化)都会通过JavaScript来处理style或类。那么今天我们将要学习的是如何通过JavaScript来控制样式和类名,在深入讨论JavaScript处理样式和类的方法之前,我们需要知道在Web页面中元素的样式处理通常有两种方式。

  • 在HTML添加类名,然后在CSS样式文件中处理样式
  • 通过JavaScript控制HTML元素的style属性,改变元素样式

虽然上面提到的方法都可以处理页面元素的样式,但CSS始终是最佳选择 —— 不仅对HTML如此,在JavaScript中也是如此。因为我们一直遵守的是:分离

当然很多时候,只使用CSS的类方式并不一定能达到我们要的结果(也就是说类再也无法处理时),那么我们就必须使用JavaScript操作HTML元素中的style属性。 比如,如果我们要动态计算元素的坐标,并想通过JavaScript来设置,那么我们就可以像下面这样做:

elem.style.left = left
elem.style.top = top

这只是其中的一种情景,事实上还有很多其他的情景,比如将文本的颜色变成红色,比如添加一个背景图片。其实,通过JavaScript来控制CSS类名,更灵活,更容易支持。

至于为什么要这么做,或者要怎么做,接下来的内容就是围绕着这些方面来阐述,感兴趣的,欢迎继续往下阅读。

为什么要使用JavaScript设置样式

文章开头我们提到了可以通过JavaScript来控制Web的样式。那么为什么要使用JavaScript设置元素样式?在深入讨论之前,我们有必要知识为什么要使用JavaScript来设置元素样式。在常见的情况下,咱们可以通过样式文件(就是.css文件或style标签)或内联样式(元素中调用style属性)来控制Web元素的外观。这也可能是大家更多时候想要的。

但在很多时候,是希望内容更具交互性,打个比方说,你希望根据用户输入的状态(比如鼠标单击或者悬浮)引入别的样式,这些样式代码在后台运行。虽然像hover这样的伪选择器提供了一些支持,但是功能还是有很多限制。

言外之意,很多更具交互性(或者说更多的富交互性)的解决方案是需要强度依赖JavaScript。JavaScript不仅可以让你在与之交互的元素上进行样式变化,更重要的是,它允许你在整个页面中使用样式。可以说这种自由性是非常强大的,而且远远超出了CSS对内容样式能力的限制。

两种处理样式的方式

正如文章开头提到的,如果要控制元素的样式变化,有两种方法可能使用JavaScript来修改。一种方法是直接在元素上设置CSS属性(其实就是通过元素内联的style属性来实现)。另一种方法是从元素中添加或删除类名,这可能导致Web运用或Web程序忽略某些样式规则。接下来我们会围绕着这两种方式进行深入的学习。

直接设置style

在学习如何直接修改元素的style(或者如标题写的一样,直接通过设置style)属性来改变元素的样式之前,需要先花点时间来了解CSSStyleDeclaration接口。

CSSStyleDeclaration接口可以用来操作元素的样式。常见的方式(接口)有:

  • 元素节点的style属性,即HTMLElement.style,也就是前面介绍的方式
  • CSSStyle实例的style属性,即HTMLElement.style.cssText
  • window.getComputedStyle()

HTMLElement.style

通过JavaScript访问的每个HTML元素都有一个style对象。该对象允许您指定CSS属性并设置其值。比如你在浏览器控制台中输入$0.style就可以看到类似下图这样的一个截图:

从上图可以看出来,style对象下有的CSS属性。言外之意,上图中的CSS属性(还有很多没截到,可以点击这里查阅读所有的属性)可以通过elem.style.property = 'value'的方式来设置对应属性的值。例如,咱们想对$0设置背景颜色:

$0.style.backgroundColor = '#d93600'

$0事实上对应的就是你在浏览器控制台中选中的元素。

简单地说,要直接使用JavaScript来控制元素样式,第一步是要选中要被修改样式的元素。上面示例使用的是$0这样的快速选择元素方式(在浏览器控制台中可以这么使用),在JavaScript中,可以使用querySelector()方法选中元素,当然在JavaScript中还可以使用其他的方式,比如前面《getElement*querySelector*》一文中介绍选中元素的方法。第二步是找到你关心的CSS属性(想要更换的CSS样式属性,比如上例中的backgroundColor,其实对应的就是CSS中的background-color),然后给该属性赋值。需要注意的是,CSS中的许多值实际上是字符串。也要记住,很多值需要带有像pxem这样的度量单位才能被识别。

通过elem.style.poperty方式修改元素的样式,实际上修改的是HTML元素的style属性的值。比如:

总而言之,可以控制HTML元素的style属性来修改任何你想修改的HTML元素的样式

也就是说,style是HTML元素的一个标签属性,也就是说它也是元素节点。既然是DOM元素的节点,我们就可以通过getAttributesetAttributeremoveAttribute等方法来读写或删除DOM元素的style属性。就上面的示例,咱们可以使用setAttribute()实现同样的效果,比如:

$0.setAttribute(
    'style',
    'background-color: orange; z-index: 9999; border-left-width: 5px;'
)

如果你对getAttributesetAttributeremoveAttribute从未接触或不太了解,建议你花点时间阅读前面整理的文章《AttributeProperty》一文。

上面的示例演示了HTMLElement.style属性来给HTML元素添加样式,其效果等同于使用HTML

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/style-and-class.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部