JavaScript_javascript 기술에서 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, %(백분율) 등이 있습니다.

이 방법은 성능과 동작의 분리 원칙에 위배됩니다. 일반적으로 자주 변경되는 요소의 실시간 스타일(동작 관련)을 정의하는 데에만 적합합니다. 예를 들어 드래그에 사용할 수 있는 div는 변경됩니다. 속성은 지속적으로 변경되며, 이 방법을 사용하면 스타일을 즉시 수정하고 다른 설정을 무시할 수 있습니다.

2. 클래스 및 아이디 변경

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

id를 변경하는 방법은 클래스와 비슷하지만 id는 요소의 위치를 ​​찾는 데 사용되기 때문에 이 방법을 사용하지 않는 것이 가장 좋습니다. JavaScript 후크로 자주 사용됩니다. 불필요한 오류가 발생할 수 있습니다.
JavaScript에서 class는 예약된 키워드이므로 className을 속성으로 사용하여 요소 클래스에 액세스합니다. 예:

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

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

삭제할 때 정규식을 사용하고 문자열의 위치(머리, 꼬리, 가운데)에 따라 클래스를 삭제했는데 더 나은 방법이 생각나서 처음과 끝에서 클래스를 삭제하는 것이었습니다. className 속성 각각에 공백을 추가하면 모든 것이 중간 메서드가 되어 하위 문자열을 직접 대체합니다.

//删除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 초공간에 넣어 위와 같은 문제가 발생하지 않도록 하는 것입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.