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

How to set css style in jq

青灯夜游

Release： 2023-01-05 16:08:04

Original

14867 people have browsed it

The css() method can be used in jquery to set css styles. The css() method can set one or more style attributes for the selected element; to set a single css style, use the "css(attribute name, value);" statement, and to set multiple styles, use "css({attribute name 1: value) 1, attribute name 2: value 2...}" statement.

How to set css style in jq

The operating environment of this tutorial: Windows 7 system, jquery version 1.10.0, Dell G3 computer.

Use the css() method to set the css style

The css() method sets one or more style attributes for the selected element.

The syntax is as follows:

One style: css(property name, value);

Multiple styles: css({property name 1: Value 1, attribute name 2: value 2...})

Example: Use the css() method to set css properties.

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>注意字体和背景色的变化<h2>
<p>注意字体和背景色的变化</p>
<p>注意字体和背景色的变化</p>
<button type="button">点击我观察变化</button>
</body>
</html>

Copy after login

Methods related to style categories

You can specify the category of HTML elements through class. Methods related to CSS categories in jquery.

1.addClass() method: add categories to matching HTML elements Attributes.

Syntax: addClass(classname), classname is the name of the category to be added.

2.hasClass() method: You can determine whether the matching element is owned The specified category.

Syntax: hasClass(classname)

If the matching element has a category named classname, the hasClass() method returns True; otherwise it returns False .

3.removeClass() method: Remove the specified class attribute for the matching HTML element. That is, perform a switching operation.

Syntax: removeClass(classname), classname is the name of the category to be switched

4.toggleClass() method: Check the specified class in each element. If it does not exist, add the class, if it is set, delete it.

Syntax: toggleClass(classname), classname is the name of the category to be switched

Example: Use the addClass() method to add an instance of the class attribute to an HTML element.

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
p{
margin:8px;
font-size:16px;
}
.selected{
color:red;
}
.highlight{
background:yellow;
}
</style>
</head>
<body>
<p>注意我的变化</p>
<button type="button" id="addClass">添加样式</button>
<button type="button" id="removeClass">删除样式</button>
<script type="text/javascript">
$("#addClass").click(function(){
$("p").addClass("selected highlight");
});
$("#removeClass").click(function(){
$("p").removeClass("selected highlight");
});
</script>

Copy after login

Getting and setting the size of HTML elements

##1.height() method: getting and setting the height of the element. The syntax is as follows:

Syntax for getting the height:

value=height();

Syntax for setting height:

height(value);

2.innerHeight() method: Get the height of the element (Including top and bottom inner borders).

Syntax:

value=innerHeight();

3.innerWidth() method: Get the width of the element (including left and right padding).

Syntax:

value=innerWidth();

4.outerHeight() method: Get the height of the element (including the inner border, border and margin of the top and bottom ).

Syntax:

value=outerHeight();

5.outerWidth() method: Get the width of the element (including left and right padding, border and margins).

Syntax:

value=outerWidth();

6.width() method: Get and set the width of the element. The syntax is as follows:

The syntax for getting the width:

value=width();

The syntax for setting the width:

width(value);

Example: Get the height of the html element.

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
button{
font-size:12px;
margin:2px;
}
p{
width:150px;
border:1px red solid;
}
div{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<button id="getp">获取段落尺寸</button>
<button id="getd">获取文档尺寸</button>
<button id="getw">获取窗口尺寸</button>
 
<div> </div>
<p>用于测试尺寸的段落。</p>
<script>
function showHeight(ele,h){
   $("div").text(ele+"的高度为"+h+"px.");
}
$("#getp").click(function(){
 showHeight("段落",$("p").height());
});
$("#getd").click(function(){
 showHeight("文档",$(document).height());
});
$("#getw").click(function(){
 showHeight("窗口",$(window).height());
});
</script>
</body>
</html>

Copy after login