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:512264browse

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

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:

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!

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