JavaScript에서 스타일, ID, 클래스 등과 같은 CSS 속성을 수정하기 위한 스타일 메서드 요약

JavaScript를 사용하면 CSS 스타일을 즉시 변경할 수 있으므로 사용자가 집중하고 싶은 부분으로 사용자의 관심을 끌고 더 나은 대화형 경험을 제공할 수 있습니다.

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

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

노드 클래스 또는 ID 변경
새 CSS 작성;

처음 두 가지 방법을 통해 거의 모든 기능을 구현할 수 있으며 코드가 더 명확하고 이해하기 쉽습니다.

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

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

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

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

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

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

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

2. 클래스 및 ID 변경

id 및 클래스는 변경 후 요소의 스타일을 자동으로 업데이트합니다.

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

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

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

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

삭제할 때 정규식을 사용했고, 문자열의 위치(head, tail, middle)에 따라 클래스를 삭제했는데, 그러다가 className의 head와 tail을 모두 삭제하는 더 좋은 방법이 생각났습니다. 속성을 추가하면 모든 것이 중간 방법이 되고 하위 문자열을 직접 대체합니다.

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

일반적인 스타일 수정에 이 방법을 사용하는 것이 가장 좋습니다. CSS 스타일을 정의하면 JavaScript는 특정 스타일을 변경하는 명령만 발행합니다. 스타일 정의는 여전히 CSS에 남아 있습니다.

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

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 하이퍼스페이스에 넣어야 위와 같은 문제가 발생하지 않습니다.

위 내용은 JavaScript에서 스타일, ID, 클래스 등과 같은 CSS 속성을 수정하기 위한 스타일 메서드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!