HTML、CSS及JavaScript : JavaScript征服Style的五种武器_html/css_WEB-ITnose
在HTML的世界里,对于一个元素来说,看的主要不是气质,而是它的Style,因为Style决定了颜值。俗话说,JavaScript与Style,得其一者得天下。但是,Style永远无法改变JavaScript,JavaScript却可以征服Style。因为JavaScript有五种武器,所以可以对Style为所欲为,既可远观,亦可亵玩。
第一种武器是 className,在JavaScript,得到一个元素的 className就是得到了这个元素的 class属性的值。Show Code:
<div id="box" class="one two"/><script> var box = document.getElementById("box") alert(box.className) box.className += ' three'</script>
上面的代码拿到 box的 class,然后又给它添加了一个 three。如果想去掉某个 class,只要通过字符串操作去掉,然后重新给 className赋值就可以了。
第二种武器是 style,确切地说,这是个武器包,你几乎可以用它修改所有 style。比如说你执行了 box.style.width='100px',就相当于在 box上添加了一个 style="width:100px"。
对于那些由多个单词组成的style值,就是 background-color、 marigin-top之类的,要把横线去掉,然后单词的首字母大写。对,改成像 backgroundColor、 mariginTop这样。像 -moz-border-radius这种,也是把 -去掉,然后后面的字母换成大写,就是改成 MozBorderRadius。
因为style属性优先与css,所以你可以用style覆盖掉css中设置的样式,也可以把它设成空字符串还原:
var box = document.getElementById("box")box.style.width='100px'box.style.width=''
上面的代码最终会保持box的 width不变。
第三种武器是 cssText,好吧,实际上它也是style中的一个属性。但因为它很强大,所以我们特意提高了它的地位。用 style.cssText可以获取和设置完整的style内容。
<div>Button</div><script> var div = document.body.children[0] div.style.cssText='color: red !important; \ background-color: yellow; \ width: 100px; \ text-align: center; \ blabla: 5; \ ' alert(div.style.cssText)</script>
浏览器会对 cssText进行解析,然后把解析结果应用到元素上去。上面代码中那个不认识blabla就直接忽略掉了,不会报错,所以要注意typo。
并且如果你想加 !important,只能用 cssText。
接下来要出场的,是真正重量级的两种武器,或者说一又十分之一种武器。一种是标准的 getComputedStyle,另外一种是它的十分之一变种,自恋的M$IE专为自己打造的 currentStyle(哦,据说它的市场份额只有十分之一了嘛)。
在真实的页面中,我们很少见到在元素的 style属性中设置的样式,所以用 style几乎读取不到任何元素的Style。比如下面这个例子:
<style> body { margin: 10px }</style><body> <script> alert(document.body.style.marginTop) </script> </body>
是得不到任何值的。
这种需求只能靠 window.getComputedStyle来解决,这个方法是 DOM Level 2的标准方法,所有浏览器(除了IE < 9)都支持。
所以要获取上面那个例子中的marginTop,以及所有在浏览器给元素应用了style和样式表之后的Style,都可以像下面这样:
<style> body { margin: 10px }</style><body> <script> var computedStyle = getComputedStyle(document.body, null) alert(computedStyle.marginTop) </script></body>
至于IE 9之前的浏览器,就得用 currentStyle读取了。或者像这样:
<style> body { margin: 10% }</style><body><script> if (window.getComputedStyle) { var computedStyle = getComputedStyle(document.body, null) } else { computedStyle = document.body.currentStyle } alert(computedStyle.marginTop) </script></body>
好了,上面就是JavaScript征服Style的五种武器。不过我是只用前面四种武器的,既然用户到现在还用IE
声明:本文参考(抄袭)了 Styles and classes, getComputedStyle

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

vue 응용 프로그램을 개발할 때 라우터 폴더 아래에 index.js 파일에 vuerouter를 등록해야 할 필요성이 있으면 종종 라우팅 구성에 문제가 발생합니다. 특별한...
