jquery sets inline style css()-JS Tutorial-php.cn

jquery sets inline style css()

无忌哥哥

Release： 2018-06-29 14:02:25

Original

4736 people have browsed it

jquery sets inline style css()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置内联样式css()</title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/jsy.jpg">
<div>
<div></div>
</div>
</body>
</html>

Copy after login

css() method is very similar to attr() method, and also comes with read and set features

The execution is determined based on the number of parameters Operation, one parameter is to read, and the other two parameters are to set.

The function is equivalent to reading or setting the value of the style attribute of the current element, which is actually the inline style

1. Set the style css(name,value)

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)
var res = $(&#39;img&#39;).css(&#39;border-radius&#39;, &#39;10%&#39;)
var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;, &#39;3px 3px 3px #888&#39;)
var res = $(&#39;img&#39;).css({
&#39;width&#39;: &#39;200&#39;,
&#39;border-radius&#39;: &#39;10%&#39;,
&#39;box-shadow&#39;: &#39;3px 3px 3px #888&#39;
})

Copy after login

2. Read the style css(name) and return all string types

var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;)
var res = $(&#39;img&#39;).css(&#39;width&#39;)

Copy after login

Because the returned string is a string, so for data such as width and height, If you want to calculate, you must first convert it to a numerical type

var res = parseInt($(&#39;img&#39;).css(&#39;width&#39;), 10) //200
res += 50
var res = $(&#39;img&#39;).css(&#39;width&#39;,res+&#39;px&#39;)

Copy after login

It can be seen that such an operation is very troublesome, but width and height calculations are used very frequently

So jquery targets the width and height styles There are two dedicated methods: width() and height()

3.width() and height() methods

Set the image width and height to 200, and the default unit is px

var res = $(&#39;img&#39;).width(200)
var res = $(&#39;img&#39;).width(&#39;200&#39;)
var res = $(&#39;img&#39;).width(&#39;200px&#39;)
var res = $(&#39;img&#39;).width(&#39;200pt&#39;)

Copy after login

is equivalent to:

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)

Copy after login

It is easier to set the width and height, and supports the abbreviation of the operator

var res = $(&#39;img&#39;).width(&#39;+=100&#39;)
var res = $(&#39;img&#39;).width()  //300

Copy after login

is equivalent to:

var res = $(&#39;img&#39;).css(&#39;width&#39;,&#39;+=50&#39;)
var res = $(&#39;img&#39;).width()  //250

Copy after login

height() height The method and usage are exactly the same as width(). Please test it by yourself

In addition to the width and height, obtaining the current position of the element is also a frequently used operation. jquery also defines a shortcut method

4. Get the position of the element: offset(), which returns an object

var res = $(&#39;img&#39;).offset()

Copy after login

Query the offset from the left and top

var res = $(&#39;img&#39;).offset().left
var res = $(&#39;img&#39;).offset().top

Copy after login

You can see that this operation reflects the position of the element The position of the ordinary document flow

If the element adopts absolute positioning, how to check its offset in the parent block?

5. Check the offset of the absolutely positioned element : position()

var res = $(&#39;.box2&#39;).position().left
var res = $(&#39;.box2&#39;).position().top

Copy after login

offset() and position() methods only apply to visual elements in the page, and can only be obtained, not set

Similarly, scrollLeft() returns Horizontal scroll bar position, scrollTop() returns the vertical scroll bar position, everyone can test it by themselves

Console to view the results

console.log(res)

Copy after login

The above is the detailed content of jquery sets inline style css(). For more information, please follow other related articles on the PHP Chinese website!