Home >Web Front-end >JS Tutorial >jquery sets inline style css()

jquery sets inline style css()

无忌哥哥Original: 2018-06-29 14:02:254818browse

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

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

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

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

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

is equivalent to:

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

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

is equivalent to:

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

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()

Query the offset from the left and top

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

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

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)

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!

jquery css 运算符字符串字符串类型对象 position

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

Previous article：How to use mock data in vue-cli projectNext article：How to use mock data in vue-cli project

See more

jquery sets inline style css()

Related articles