Home >Web Front-end >JS Tutorial >How to set gradient color in javascript

How to set gradient color in javascript

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-06-15 14:48:517378browse

In JavaScript, you can use the style object attribute to set the gradient color. The syntax format is "element object.style.backgroundImage='linear-gradient(angle, color, color)'"; the Style object represents a separate Style declaration.

How to set gradient color in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In fact, the implementation of gradient is ultimately controlled by css (style)

All codes are written directly in JS:

var test = document.getelementById(''test);
test .style.backgroundImage='linear-gradient(120deg, #155799, #159957)';

PS: The 'i' of the backgroundImage here must be It should be capitalized, and it must be written like this. It cannot be written the same as the background-image in CSS, which will not be recognized by JS.

Extended information:

After writing it in css, add a class to the element through js to add a new style:

Defined in the style sheet Style ​

css:

.jianbian{
background-image: linear-gradient(120deg, #155799, #159957);
}

Then add class to the element through js

js:

var test = document.getelementById(''test);
test.className = 'jianbian' ;

That’s it, but you still need to consider the differences Browser compatibility, how to write gradients.

-webket-/-moz-like

[Recommended learning: javascript advanced tutorial]

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn