1. 스타일 부분 변경
은 직접 스타일 변경, className 변경, cssText 변경의 세 가지 유형으로 나눌 수 있습니다. 주의해야 할 점은 다음과 같습니다.
대문자 사용에 주의하세요.
Javascript는 대문자 사용에 매우 민감합니다. ClassName은 "N"을 "n"으로 쓸 수 없으며 cssText는 "T"를 "t"로 쓸 수 없습니다. 그렇지 않으면 효과를 얻을 수 없습니다. .
호출 방법:
className을 변경하는 경우 스타일 시트에 클래스를 미리 선언하되 호출 시 스타일을 따르지 마세요. document.getElementById('obj').style.className=”… document.getElementById('obj').className="..."
Change cssText
그러나 cssText를 사용하는 경우 스타일을 추가해야 합니다. 올바른 작성 방법은 document.getElementById(입니다. 'obj').style.cssText =”… , href의 값은 웹 페이지 스타일의 실시간 전환, 즉 "템플릿 스타일 변경"을 구현하여 외부 링크 스타일을 변경할 수 있습니다. 이때 먼저 변경이 필요한 대상에
document.getElementById('obj').style.backgroundColor=”#003366″
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
첫 번째: 외부 스타일 시트 파일 연결(Linking to a Style Sheet)
먼저 외부 스타일 시트 파일(.css)을 만든 후 HTML 링크 개체를 사용할 수 있습니다. 예시는 다음과 같습니다.
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
<head> <title>文档标题</title> <link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css"> </link></head>
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
여기에서 스타일 개체의 유형 속성을 "text/css"로 설정하면 이 유형을 지원하지 않는 브라우저가 스타일 시트를 무시할 수 있습니다.
인라인 정의는 객체의 마크 내에서 객체의 스타일 속성을 이용하여 이에 적용되는 스타일 시트 속성을 정의하는 것입니다. 예는 다음과 같습니다:
<html> <head> <title>文档标题</title> <style type="text/css"> <!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} --> </style> </head> <body> </body></html>
위 내용은 CSS 스타일 예제의 JavaScript 로컬 수정 및 전역 수정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!