How to change css style width in jq-JS Tutorial-php.cn

How to change css style width in jq

醉折花枝作酒筹

Release： 2021-07-26 10:31:51

Original

2324 people have browsed it

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.

How to change css style width in jq

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");

Copy after login

Set CSS properties

If you need to set the specified CSS properties, please use the following syntax:

css("propertyname","value");

Copy after login

Set multiple CSS properties

If you need to set multiple CSS properties, please use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

Copy after login

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>

Copy after login

Effect:

How to change css style width in jq

[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!