jquery를 사용하여 CSS 스타일을 동적으로 수정하는 방법

jquery가 CSS 스타일을 동적으로 수정하는 방법: 1. CSS 스타일을 동적으로 수정합니다. 2. 지정된 html 요소에 대한 CSS 스타일을 설정합니다. 3. 요소의 CSS 스타일을 봅니다. 다른 지정된 html 요소.

이 문서의 운영 환경: Windows 7 시스템, jquery 버전 3.2.1, Dell G3 컴퓨터.

jquery는 CSS 스타일을 동적으로 변경하는 방법을 구현합니다.

자세한 내용은 다음과 같습니다.

jquery는 단순성과 사용 편의성에서 거의 분리할 수 없는 WEB 애플리케이션 개발을 위한 표준 JS 라이브러리가 되었습니다. 백엔드 개발자로서 일부 프런트엔드 페이지를 만들 때 CSS 스타일 제어는 필수적이며 숙달되어야 합니다. 정적 CSS인 경우 물론 직접 작성할 수 있지만 일부 인터페이스에는 색상 변경, 글꼴 크기 변경, 심지어 현실에 숨겨진 p 등과 같은 동적 효과가 필요합니다. 이러한 모든 것에는 CSS 스타일을 동적으로 제어하려면 자바스크립트가 필요합니다. . , 다음은 CSS 스타일을 제어하기 위해 일반적으로 사용되는 jquery 방법을 요약한 것입니다.

1. 하이퍼링크 스타일 변경
2. 지정된 HTML 요소에 지정된 CSS 스타일 제공
3.
4. 표시 p 또는 기타 지정된 html 요소 숨기기

1. 하이퍼링크 스타일 변경

$("#mylink a").css('color','#111111');
//这里选择器‘$("#mylink a")'表示ID为'#mylink'的元素下的所有链接。
//.css(‘color','#111111');表示把颜色设为'#111111'

2. 지정된 html 요소에 정의된 CSS 스타일 지정

1. file

.mystyle{width:200px;height:100px;}

에서 CSS 스타일을 만든 다음 jquery를 사용하여

$("#result").css(mystyle);

2 값을 할당합니다. CSS 개체(즉, javascript 개체)를 정의한 다음

var pcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(pcss);

값을 할당할 수 있습니다. 저는 개인적으로 외부 링크 방법을 추천합니다.

3. 요소의 CSS 스타일 보기

var mycolor=$("#mylink a").css("color");
if ($('#myp').css('display')=="none"){...}
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

4. 디스플레이 p 또는 다른 요소에 숨기기

1. CSS 방법

$('#myp').attr('style','display:none;');//隐藏
$('#myp').attr('style','display:block;');//显示

추천 학습: "jquery 비디오 튜토리얼"

위 내용은 jquery를 사용하여 CSS 스타일을 동적으로 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!