在javascript中设置多个CSS样式的不同方法及实例

迪鲁宾
1,271 阅读1分钟

有时，我们想用javascript代码来应用HTML CSS样式。

Html元素使用内联CSS选择器或CSS选择器做样式。

让我们看看用javascript编程为HTML添加内联CSS和类样式的例子。

如何在javascript中设置多个内联CSS样式

HTML元素可以使用style 属性进行样式设置。

通常情况下，内联CSS样式是通过以下方式应用的

<div id="mycontent3" style="font-size: 35px; color: red;">
    javascript css apply style example
</div>

让我们看看使用javascript和jquery来设置多个内联样式的例子。

声明带有文本内容的div元素。

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
  <body>
    <div id="mycontent3">
    javascript css apply style example
    </div>
</body>
</html>

Javascript提供DOM API来操作HTML元素。

  • 使用样式cssText属性

首先，使用id选择器（id=mycontent3）获得一个元素，在这个document.getElementById() ，选择一个div 。

用style.cssText 属性给返回的元素设置多个样式。

document.getElementById("mycontent3").style.cssText = "font-size: 35px; color:red;";

  • 使用setAttribute

    用DOM API通过id选择一个元素，用style 属性应用setAttribute 。

document.getElementById("mycontent3").setAttribute(
   "style", "font-size: 35px; color:red;");

使用jquery设置多个内联CSS样式的例子

在jquery中应用多个CSS样式是很容易的。

在jquery中使用选择器语法选择一个元素

下面是一个为一个id选择器设置多个内联样式的jquery。

$('#mycontent3').css({
  font-size: '35px',
  color:`red`
});

一个为HTML选择器添加内联CSS样式的例子

$('div').css({
  font-size: '35px',
  color:`red`
});

改变内联CSS样式的类选择器的例子

$('.classname').css({
  font-size: '35px',
  color:`red`
});

在javascript中添加和删除CSS样式的选择器

CSS样式也可以使用选择器属性来应用。

在css文件中声明css元素以分组所有css样式

.heading{
    font-size: 35px;
    color:red;
}

Html元素使用元素选择器(elementname)、类选择器(.selector)和id选择器(#selector)语法来应用样式。

<div id="mycontent3" class="heading">
    javascript css apply style example
</div>

让我们看一个如何添加CSS选择器的例子。

使用javascript添加一个选择器，首先使用DOM API -document.getElementByID() 检索一个div元素，使用classList.add 方法添加类。

document.getElementById("mycontent3").classList.add("heading");

通过javascript从html元素中删除一个类选择器。

document.getElementById("mycontent3").classList.remove("heading");

在jquery中添加和删除样式CSS选择器

在这个例子中，使用jquery添加和删除类名。

下面是一个动态添加类选择器的例子

$('#mycontent3').classList.add("heading");

通过jquery从html元素中删除一个类选择器。

$('#mycontent3').classList.remove("heading");

总结

综上所述，使用javascript和jquery添加内联多个CSS样式和类名的多种方法，并举例说明。

avatar
文章
阅读
粉丝