Home > Article > Web Front-end > How to change css style width in jq
How to change css style width in jq
- 醉折花枝作酒筹Original
- 2021-07-26 10:31:512258browse
In jquery, you can use the css() method to change the style. The syntax format is "$("Element Name").css("Attribute Name", "Attribute Value")"; css() method setting Or return one or more style properties of the selected element, setting the specified CSS property for all matching elements.
The operating environment of this tutorial: Windows 7 system, jquery version 1.11.1, Dell G3 computer.
css() method sets or returns one or more style attributes of the selected element.
Return CSS properties
If you need to return the value of the specified CSS property, please use the following syntax:
css("propertyname");Set CSS properties
If you need to set the specified CSS properties, please use the following syntax:
css("propertyname","value");Set multiple CSS properties
If you need to set multiple CSS properties, please use the following syntax:
css({"propertyname":"value","propertyname":"value",...});Example
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"width":"200px"});
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>Effect:
[Recommended learning: javascript advanced tutorial】
The above is the detailed content of How to change css style width in jq. For more information, please follow other related articles on the PHP Chinese website!