JavaScript HTML DOM - CSS 변경

JavaScript HTML DOM - CSS 변경

JavaScript에서 CSS를 수정하는 방법에는 4가지가 있습니다.

노드 스타일 수정(인라인 스타일)

노드 클래스 또는 ID 변경

페이지 스타일 바꾸기; 의 시트

개인적으로 후자의 두 가지 방법을 사용하는 것을 권장하지 않습니다. 처음 두 가지 방법을 통해 거의 모든 기능을 구현할 수 있으며 코드가 더 명확하고 이해하기 쉽습니다.

요소의 실제 스타일을 얻는 방법과 주의 사항에 대해서도 나중에 양식으로 이야기하겠습니다.

1. 노드 스타일 수정(인라인 스타일)

이 방법은 노드의 스타일 속성에 직접 작성되며 다른 방법으로 설정된 스타일을 재정의합니다. 사용법은 매우 간단합니다.

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

그러나 일부 CSS 스타일 이름은 글꼴 크기, 배경 이미지 등과 같은 여러 단어로 구성됩니다. 그러나 JavaScript에서는 모두 대시(-)로 연결됩니다. 대시는 "빼기"를 의미하므로 속성 이름으로 사용할 수 없습니다. FontSize, backgroundImage와 같은 속성 이름을 작성하려면 "camelCase"를 사용해야 합니다.

또한 많은 스타일에는 단위가 있으므로 숫자만 제공할 수는 없습니다. 예를 들어, FontSize의 단위에는 px, em, %(백분율) 등이 있습니다.

이 방법은 성능과 동작의 분리 원칙을 위반합니다. 일반적으로 자주 변경되는 요소의 즉각적인 스타일(동작 관련)을 정의하는 데만 적합합니다. 예를 들어 드래그에 사용할 수 있는 div는 상단과 동작을 변경합니다. 현재로서는 클래스나 다른 메소드로 정의할 수 없으며, 이 메소드를 사용하면 스타일을 즉시 수정하고 다른 메소드의 설정을 대체할 수 있습니다.

2. 클래스 변경, id

id 및 클래스는 스타일 설정을 위한 "후크"입니다. 변경 후 브라우저는 요소의 스타일을 자동으로 업데이트합니다.

ID를 변경하는 방법은 클래스와 비슷하지만, 요소의 위치를 ​​찾는 데 사용되기 때문에 개인적으로 이 방법을 사용하지 않는 것이 가장 좋습니다. JavaScript의 후크로 자주 사용되므로 불필요한 오류가 발생할 수 있습니다.

JavaScript에서 class는 예약된 키워드이므로 className을 속성으로 사용하여 요소의 클래스에 액세스합니다. 예:

.redColor{
color: red;
}
.yellowBack{
background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

하지만 더 우울한 점은 이 속성이 요소의 모든 클래스를 포함하는 문자열이라는 것입니다. 클래스는 공백으로 구분됩니다. 클래스를 삭제할 때 매우 불편합니다. (그냥 추가하고, 클래스 사이에 문자열 연결만 하되, 앞에 공백을 추가하는 것을 잊지 마세요~)

이전에는 삭제할 때 정규식을 사용했고, 문자열의 위치(머리, 꼬리, 중간)에 따라 클래스를 삭제했는데, 그러다가 머리와 꼬리를 모두 삭제하는 더 좋은 방법이 생각났습니다. className 속성을 추가하면 모든 것이 중간 메서드가 되며 하위 문자열을 직접 바꿉니다.

//Delete class

function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

일반적인 스타일 수정에는 이 방법을 사용하는 것이 가장 좋습니다. CSS 스타일을 정의하세요. JavaScript는 스타일 변경에 대한 지침만 발행합니다.

후자의 두 가지 방법은 우아하지도 않고 특정 호환성 문제도 없으므로 소개하지 않겠습니다~

3. 실제 스타일을 구합니다

우선 element.style을 사용할 수 없다는 점을 분명히 해야 합니다. 인라인 스타일만 얻을 수 있고 스타일 시트의 정의는 얻을 수 없습니다.

요소의 스타일은 여러 곳에서 정의될 수 있으므로 실제 스타일이 어떻게 생겼는지 말하기 어렵습니다. 브라우저에 표시되는 요소의 실제 스타일을 얻을 수 있는 방법이 있나요? Microsoft와 W3C는 해당 메소드를 제공하므로 이를 사용하려면 캡슐화하기만 하면 됩니다.

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

전달된 styleName은 "카멜 케이스 형식"임을 기억하세요~~

4. 양식 표시 및 숨기기(남용하지 마세요) CSS)

일부 양식 옵션이 동적으로 추가되는 경우가 많습니다. 예를 들어 양식에서 결혼 상태로 '기혼'을 선택하면 배우자의 이름을 입력할 수 있는 추가 입력 상자가 나타납니다.

선택의 여지가 없다면 당연히 "배우자" 관련 양식을 모두 숨겨야 하지만 이때 CSS를 사용하여 해결하면 안 됩니다. 즉, style.display="none"을 사용하여 숨길 수 없습니다. 그것.

숨기든 말든 입력창은 늘어나지도 줄어들지도 않고 있기 때문이죠~ [Halo] 직설적으로 말하면 숨겨지더라도 사용자가 여기에 폼을 제출하면 DOM에는 계속 존재합니다. 시간이 지나면 이 숨겨진 입력창의 내용이 함께 제출되며 예상치 못한 오류가 발생할 수 있습니다~

올바른 방법은 이 내용을 DOM 하이퍼스페이스에 넣어서 위와 같은 문제가 발생하지 않도록 하는 것입니다