Home > Article > Web Front-end > Detailed explanation of JavaScript operation class and style code_javascript skills

Detailed explanation of JavaScript operation class and style code_javascript skills

WBOYOriginal: 2016-05-16 15:15:461133browse

Without further ado, I will just post the js code for you. The specific code is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-">
<title>无标题文档</title>
<style>
.fontSize
{
font-size:px;
}
.fontWeight
{
font-weight:bold;
}
</style>
</head>
<body>
<div id="div" class="fontSize fontWeight" style="color:red">div实例文本</div>
<button onclick="changeStyle()">changeStyle()</button>
<script>
function changeStyle()
{
var div = document.getElementById("div");
//div.className = "fontSize";
//div.className += " fontWeight";
//删除单个class=""样式
//div.className = div.className.replace(/fontSize/,"");
//删除所有class=""样式
//div.removeAttribute("class");
//删除中的单个样式
div.style.cssText = div.style.cssText.replace(/red/,"blue");
//删除中的所有样式
//div.style.cssText = "";
}
</script>
</body>
</html>

The above content is a detailed explanation of JavaScript operating class and style code. I hope it will be helpful to everyone.

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

Previous article：Realizing dynamic vertical column bar effects based on jquery_jqueryNext article：Realizing dynamic vertical column bar effects based on jquery_jquery

See more

Detailed explanation of JavaScript operation class and style code_javascript skills

Related articles