집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 인라인 스타일 CSS()를 설정합니다.

jquery는 인라인 스타일 CSS()를 설정합니다.

无忌哥哥원래의: 2018-06-29 14:02:254818검색

jquery는 인라인 스타일 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>

css() 메서드는 attr() 메서드와 매우 유사하며 읽기 및 설정 기능도 제공됩니다.

수행할 작업은 매개변수 1개에 따라 결정됩니다. 는 읽기이고, 두 번째 매개변수는 읽기입니다. 첫 번째 매개변수는 현재 요소의 스타일 속성 값을 읽거나 설정하는 것과 동일한

함수를 설정하는 것입니다. 이는 실제로 인라인 스타일

1입니다. 스타일 CSS(이름, 값) 설정

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. 스타일 CSS(이름) 읽기, 반환된 것은 모두 문자열 유형입니다

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

문자열이 반환되기 때문에 너비, 높이 등의 데이터를 계산하려면 다음과 같아야 합니다. 먼저 숫자 유형으로 변환

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

이러한 작업이 매우 번거롭다는 것을 알 수 있지만 너비와 높이 계산이 매우 자주 사용됩니다

그래서 jquery에는 너비와 높이 스타일에 대한 두 가지 전용 메서드인 width() 및 height()가 있습니다.

3. width() 및 height() 메서드

는 이미지 너비와 높이를 200으로 설정합니다. 단위는 기본적으로 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;)

와 동일합니다.

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

너비와 높이 설정은 더욱 간단하며 지원됩니다. 연산자

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

의 약어는 다음과 같습니다.

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

height() 높이 메서드, 사용법은 width()와 정확히 동일합니다. 일관성이 있으므로 직접 테스트해 보세요

너비와 높이 외에도 현재 값을 가져옵니다. 요소의 위치는 자주 사용되는 작업이기도 합니다. jquery는 또한 단축 메서드

4를 정의합니다. 요소의 위치를 가져오는 offset()은 개체를 반환합니다.

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

왼쪽과 위쪽에서 오프셋을 쿼리합니다.

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

이 작업은 일반적인 문서 흐름에서 요소의 위치를 반영하는 것을 볼 수 있습니다.

요소가 절대 위치 지정을 채택하는 경우 상위 블록에서 이를 보는 방법 오프셋은 어떻습니까?

5. 요소: position()

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

offset() 및 position() 메서드는 페이지의 시각적 요소에만 적용되며 얻을 수만 있고 설정할 수는 없습니다.

마찬가지로, scrollLeft()는 가로 스크롤 막대의 위치를 반환하고 scrollTop()은 수직 스크롤 막대의 위치를 반환합니다. 직접 테스트할 수 있습니다

콘솔에서 결과를 확인하세요

console.log(res)

위 내용은 jquery는 인라인 스타일 CSS()를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

이전 기사：vue-cli 프로젝트에서 모의 데이터를 사용하는 방법다음 기사：vue-cli 프로젝트에서 모의 데이터를 사용하는 방법