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

有时，我们想用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>
<title>HTML, CSS and JavaScript demo</title>
</head>
    <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
让我们看一个如何添加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样式和类名的多种方法，并举例说明。