How to set css in javascript

How to set css in javascript: 1. Set the style object directly through inline style; 2. Set the style attribute by adding global style; 3. Use JavaScript to add and delete classes "add()" and "remove( )" set css.

The operating environment of this article: windows7 system, javascript1.8.5&&HTML5&&CSS3 version, Dell G3 computer.

javascript sets css style

1. Directly set the style object (inline style)

The easiest way to set the element style using JavaScript is to use style attribute. There is a style object for every HTML element we access through JavaScript. This object allows us to specify CSS properties and set their values. For example, this is the style to set the font color, background color, and style of the HTML element with the id value demo:

var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';  
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';  
// 将高度设置为150 px
elem.style.height = '150px';

Note: JavaScript uses the camel case principle (for example: backgroundColor) instead of dash (background-color) Represents the attribute name

The style attribute adds a style inline on the element:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

However, this can make our markup very confusing. Browser rendering performance is also poor.

2. Set the style attribute--add a global style

Another method is to inject elements with CSS attributes in c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 into the DOM. This is useful when setting styles that apply to a group of elements rather than just one.

First, we will create a style element.

var style = document.createElement('style');

Next, we will add our style to c9ccee2e6ea535a969eb3f532ad9fe89 through innerHTML.

var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';

Finally, we will inject the style into the DOM. To do this, we will get the first script tag we find in the DOM and use insertBefore() to add our style tag.

// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);

3. Use JavaScript to add and delete classes: add() and remove() [Recommended learning: javascript advanced tutorial]

This This method involves adding and removing class values, which in turn changes the applied style rules. For example, let's say we have a style rule like this:

.disableMenu {
    display: none;
}

In HTML you have a menu with id dropDown:

<ul id="dropDown">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Now if we want to change the .disableMenu style rule Applied to this element, all we need to do is add disableMenu as a class value to the dropDown element:

<ul class="disableMenu" id="dropDown">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

To accomplish the same result using JavaScript, we will use the classList API. This API makes it very simple to add or remove class values ​​from HTML elements.

To add the disableMenu class name to our dropDown element, use the add() method on the classList attribute of the HTML element:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");

To remove the disableMenu class name, we can call the classList API remove() method:

var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");

The above is the detailed content of How to set css in javascript. For more information, please follow other related articles on the PHP Chinese website!