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 후크로 자주 사용됩니다. 불필요한 오류가 발생할 수 있습니다.
.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; }
일부 양식 옵션이 동적으로 추가되는 경우가 종종 있습니다. 예를 들어 양식에서 결혼 여부를 "기혼"으로 선택하면 다음을 입력할 수 있는 추가 입력 상자가 나타납니다. 배우자의 이름.
선택의 여지가 없다면 당연히 "배우자" 관련 양식을 모두 숨겨야 하지만 이때는 CSS를 사용하여 해결하면 안 됩니다. 즉, style.display="none"을 사용하여 해결할 수 없습니다. 그것을 숨기십시오.
숨기든 말든 입력창은 늘어나지도 줄어들지도 않고 거기에 있으니까~ [Halo] 직설적으로 말하면 숨겨지더라도 사용자가 양식을 제출하면 DOM에 계속 존재합니다. 이때 이 숨겨진 입력창의 내용이 함께 제출되며 예상치 못한 오류가 발생할 수 있습니다~
올바른 방법은 이 내용을 DOM 하이퍼스페이스에 넣어야 위와 같은 문제가 발생하지 않습니다.
위 내용은 JavaScript에서 스타일, ID, 클래스 등과 같은 CSS 속성을 수정하기 위한 스타일 메서드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!