주소 표시줄의 설명은 페이지 스타일을 변경합니다. (튜토리얼)_자바스크립트 스킬

먼저 다음 명령문을 주소 표시줄에 붙여넣은 다음 Enter 키를 눌러 효과를 확인할 수 있습니다.

javascript:with(document.body){배경="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD", "border:1 solid black; background-color:#eef9ee!important"))

설명은 다음과 같습니다.

1.javascript:url
Pseudo url 기술. 이는 href 및 src 속성을 포함하는 모든 태그에 적용됩니다. 속성이 url을 값으로 허용할 수 있으면 이 javascript:url을 허용할 수 있습니다. 주소 표시줄은 location.href와 동일하므로 예외는 아닙니다. :)

2. 반환 값
대부분의 js 문에는 반환 값이 있습니다. 여기서는 location.href가 작동하도록 하기 위해 반환 값이 필요하지 않습니다.
우리의 목표를 달성하기 위해 반환 값을 생성하지 않고 표현식을 계산하는 경고를 사용할 수 있습니다. 명령문을 경고의 매개 변수로 사용하고 경고가 실행되도록 합니다.
그러나 경고를 사용하면 계산의 최종 결과(즉, 명령문 세그먼트의 최종 반환 값)가 팝업됩니다. 팝업 상자는 필요하지 않으며 명령문을 조용히 실행하기만 하면 됩니다. 반환 값이 없습니다. void 연산자는 바로 우리에게 필요한 것입니다.

3. 반환 값에 대해 이야기해보자
순차적으로 실행되는 명령문 세그먼트에서 각 문장에 반환 값이 있고 특정 속성(예: href)은 하나만 반환 값을 받을 수 있습니다. 반환 값은 어떻습니까? 대답은 마지막 것입니다. 따라서 마지막 문장에 void만 추가하면 됩니다.

4.with 문
with 문은 코드 양을 줄이기 위해 중괄호로 묶인 문 세그먼트에 대한 기본 개체를 설정할 수 있습니다. 위의 with(document.body){Background="";bgColor="#779966";text="#bb4400"}
는
document.body.Background=""
document와 동일합니다. .body.bgColor="#779966"
document.body.text="#bb4400"

5. 정의된 스타일 시트에 대한 새 규칙을 추가합니다
document.styleSheets[0].addRule( "TD","border:1 solid black")
위 명령문은 페이지의 첫 번째 스타일 시트 개체에 규칙을 추가합니다. 모든 테이블 셀에 픽셀 너비의 검은색 실선 테두리가 있도록 합니다.
styleSheets는 페이지의 모든 및 요소 모음입니다. styleSheets[0]은 첫 번째 스타일시트 요소를 나타냅니다.
addRule() 메소드는 스타일 시트 객체에 규칙을 삽입하는 데 사용됩니다. 첫 번째 매개변수는 선택자이고, 두 번째 매개변수는 선택자의 정의입니다.

6. 스타일 시트의 !important 속성
!important 속성이 있는 모든 스타일은 페이지에서 우선순위를 갖습니다. 예:
p {color:red!important}

여기 텍스트는 빨간색입니다.


그렇습니다. 시작 부분의 문장에는 이러한 지식 포인트가 포함되어 있습니다. 이를 바탕으로 제가 배울 수 있는 추가 혁신이 있습니까? 혁신을 장려하십시오. :)