极客笔记Javascript 如何使用CSS样式
javascript实体中的style属性会返回style特性的值。CSSStyleDeclaration对象通过属性和值显示样式。如果javascript条件要求更改CSS样式，则javascript属性使用style特性。它没有在外部样式表或<head>部分指定的样式属性。
javascript使用html元素，如id、class、name和其他元素来标识用户输入字段。我们可以改变样式，比如宽度、对齐方式、颜色、边框、背景颜色和其他属性。
语法
下面的语法用于在javascript标签中返回一个style属性。
Html_element.style.property
下面的语法用于在javascript标签中返回一个style属性。
Html_element.style.property = value;
如何使用该方法
- 将内容id、名称或类放置到html标签或内容中以获取元素。
Student Name: <input type = "text" name = "fname" id = "sname"/>
- 使用带有“style”标签的元素，并应用css属性和值。
- 在script标签中使用上述语法，无论是否包含function。
document.getElementById("smail").style.backgroundColor = "grey";
- 如果需要，请使用“onclick”或“onchange”功能。
Javascript中使用的CSS属性
下面的css属性在javascript中只需稍加更改即可工作。另一个style标签与CSS标签类似。如果小写连字符“_”在字符中使用，则javascript在小写连字符后使用大写字母，并删除连字符。
| JavaScript 属性 | CSS 属性 |
|---|---|
| zIndex | z-index |
| verticalAlign | vertical-align |
| textTransform | text-transform |
| textIndent | text-indent |
| textDecoration | text-decoration |
| textAlign | text-align |
| strokeWidth | stroke-width |
| paddingTop | padding-top |
| paddingRight | padding-right |
| paddingLeft | padding-left |
| paddingBottom | padding-bottom |
| marginTop | margin-top |
| marginRight | margin-right |
| marginLeft | margin-left |
| marginBottom | margin-bottom |
| margin | margin |
| listStyleType | list-style-type |
| listStylePosition | list-style-position |
| listStyleImage | list-style-image |
| listStyle | list-style |
| lineHeight | line-height |
| letterSpacing | letter-spacing |
| fontWeight | font-weight |
| fontVariant | font-variant |
| fontSize | font-size |
| fontFamily | font-family |
| cssFloat | float |
| borderWidth | border-width |
| borderTopWidth | border-top-width |
| borderTopStyle | border-top-style |
| borderTopColor | border-top-color |
| borderTop | border-top |
| borderStyle | border-style |
| borderRight | border-right |
| borderLeft | border-left |
| borderColor | border-color |
| borderBottom | border-bottom |
| backgroundPosition | background-position |
| backgroundImage | background-image |
| backgroundColor | background-color |
| backgroundAttachment | background-attachment |
| background | background |
示例
下面的例子展示了在javascript中使用不同的函数和方法使用不同的CSS样式标签。
示例1: 在javascript中更改CSS样式标签的基本方法如下面的例子所示。我们可以在button函数中使用背景颜色和字体颜色。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the CSS Style in the Javascript </title>
</head>
<body>
<h3> Use the CSS style in the Javascript </h3>
<p> The Javascript changes the color and background color of the input fields </p>
<form>
Student Name: <input type = "text" name = "fname" id = "sname"/> <br/> <br>
Student Email: <input type = "email" name = "smail" id = "smail"/> <br/> <br/>
</form>
<button type = "button" onclick = "clickme();">
Click here to see the changes.</button>
<script>
function clickme(){
document.getElementById("sname").style.backgroundColor = "grey";
document.getElementById("smail").style.backgroundColor = "grey";
document.getElementById("smail").style.color = "aqua";
document.getElementById("sname").style.color = "aqua";
}
</script>
</body>
</html>
输出
下面的图片展示了基本标签和CSS样式标签的输出。
输出1
点击前
输出2
点击后
示例2: 在下面的例子中，javascript中的CSS样式标签会显示边框、对齐方式和背景颜色，无论是否使用函数。点击输入框的按钮样式后，我们可以看到输入框的默认样式。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the CSS Style in the Javascript </title>
</head>
<body>
<h3 id = "content_data"> Use the CSS style in the Javascript </h3>
<p id = "para"> The Javascript changes the color and background color of the input fields </p>
<form>
Student Name: <input type = "text" name = "fname" id = "sname"/> <br/> <br>
Student Email: <input type = "email" name = "smail" id = "smail"/> <br/> <br/>
</form>
<button type="button"
onclick="clickme();">
Click here to see the changes.</button>
<script>
document.getElementById("content_data").style.color = "red";
document.getElementById("para").style.backgroundColor = "black";
document.getElementById("para").style.color = "white";
function clickme(){
document.getElementById("sname").style.backgroundColor = "grey";
document.getElementById("smail").style.backgroundColor = "grey";
document.getElementById("smail").style.border = "1px solid aqua";
document.getElementById("sname").style.border = "2px dotted yellow";
}
</script>
</body>
</html>
输出
下面的图片展示了基本标签和CSS样式标签的输出。
输出1
点击前
输出2
点击后
示例3: 在下面的例子中，javascript中的CSS样式标签展示了一个使用函数的基本方法或标签。可以在同一行中为一个html元素使用多个CSS属性。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the CSS Style in the Javascript </title>
</head>
<body>
<h3 id = "content_data"> Use the CSS style in the Javascript </h3>
<p id = "para"> The Javascript changes the color and background color of the input fields </p>
<form>
Student Name: <input type = "text" name = "fname" id = "sname"/> <br/> <br>
Student Email: <input type = "email" name = "smail" id = "smail"/> <br/> <br/>
</form>
<button type="button"
onclick="clickme();">
Click here to see the changes.</button>
<script>
document.getElementById("content_data").style.color = "red";
document.getElementById("para").style = "color:red; background-color:black;";
document.getElementById("smail").style = "border:1px solid black;";
document.getElementById("sname").style = "border:2px dotted grey; background-color:grey;";
function clickme(){
document.getElementById("sname").style = "border:2px dotted grey; background-color:white;";
document.getElementById("smail").style.backgroundColor = "grey";
document.getElementById("para").style = "color:red; background-color:navy;";
}
</script>
</body>
</html>
输出
下面的图片展示了基本标签和CSS样式标签的输出。
输出1
点击前
输出2
点击后
示例4: javascript中的enable、disabled和display标签的CSS样式标签是通过基本的方法或标签使用函数显示的。在这个例子中，我们可以在一行中为一个html元素使用多个CSS属性。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the CSS Style in the Javascript </title>
<style>
p {
display: none;
}
</style>
</head>
<body>
<h3 id = "content_data"> Use the CSS style in the Javascript </h3>
<p id = "para"> The Javascript changes the color and background color of the input fields </p>
<form>
Student Name: <input type = "text" name = "fname" id = "sname"/> <br/> <br>
Student Email: <input type = "email" name = "smail" id = "smail"/> <br/> <br/>
</form>
<button type="button" id = "btn"
onclick="clickme();">
Click here to see the changes.</button>
<script>
document.getElementById("content_data").style.color = "Red";
document.getElementById("smail").style = "border:1px solid black;";
document.getElementById("sname").style = "border:2px dotted grey;";
function clickme(){
document.getElementById("para").style.display = "block";
document.getElementById("sname").style = "border:2px dotted grey;";
document.getElementById("sname").style.backgroundColor = "grey";
document.getElementById("sname").readOnly = true;
document.getElementById("smail").style.backgroundColor = "grey";
document.getElementById("smail").readOnly = true;
document.getElementById("btn").style.display = "none";
}
</script>
</body>
</html>
输出
下面的图片展示了基本标签和CSS样式标签的输出。
输出1
点击前
输出2
点击后
示例5: javascript中的enable、disabled和display标签的CSS样式标签是通过基本的方法或标签使用函数显示的。在这个例子中，我们可以在一行中为一个html元素使用多个CSS属性。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the CSS Style in the Javascript </title>
<style>
#sname1 {
display: none;
}
span {
display: none;
}
p{
visibility: hidden;
}
</style>
</head>
<body>
<h3 id = "content_data"> Use the CSS style in the Javascript </h3>
<p id = "para"> The Javascript changes the color and background color of the input fields </p>
<form>
<span id = "sname"> Student Name: </span> <input type = "text" name = "fname" id = "sname1"/> <br/>
Student Email: <br> <input type = "email" name = "smail" id = "smail"/> <br/> <br/>
</form>
<button type="button" id = "btn"
onclick="clickme();">
Click here to see the changes.</button>
<script>
function clickme(){
document.getElementById("para").style.visibility = "visible";
document.getElementById("sname").style.display = "block";
document.getElementById("sname1").style.display = "block";
document.getElementById("btn").style.display = "none";
}
</script>
</body>
</html>
输出
下面的图片展示了基本标签和CSS样式标签的输出。
输出1
点击前
输出2
点击后
总结
CSS和javascript对应用程序很重要。有时javascript功能需要CSS样式标签和javascript验证。javascript style标签用于在script标签中设置CSS。