웹 프론트엔드 HTML 튜토리얼 HTML、CSS及JavaScript : JavaScript征服Style的五种武器_html/css_WEB-ITnose

HTML、CSS及JavaScript : JavaScript征服Style的五种武器_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

在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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

HTML은 초보자를 위해 쉽게 배우나요? HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

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

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

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

HTML의 시작 태그의 예는 무엇입니까? HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

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

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

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

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

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

웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? 웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 11:30 PM

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

CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? Apr 05, 2025 am 06:15 AM

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

라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? 라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? Apr 05, 2025 pm 01:03 PM

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

See all articles