`

JavaScript操作某个元素的CSS

 
阅读更多

 

需求分析

使用JavaScript做前端开发的时候,经常需要操作DOM和CSS来改变界面,而做简单动画时也必须操作css。

实现方法

以前我一直使用DOM对象的style属性来操作该元素的css,类似下面的代码:

 

< !DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <style type="text/css">
      #myDiv{
        background-color:blue;
        width:100px;
        height:200px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        alert(document.getElementById("myDiv").style.width);
        document.getElementById("myDiv").style.width = "100px";
      }
    </script>
  </head>
  <body>
    <div id="myDiv" style="background-color:red;border:1px solid black">
      MyDiv
    </div>
  </body>
</html>

 后来发现这样只能访问到该元素上以style特性定义的样式,而无法获得<link/>元素引入的外部样式和<style/>元素定义的嵌入样式。通过阅读《JavaScript高级程序设计(第2版)》知道了可以使用计算样式来获取某个元素的最终样式,计算样式是DOM2级样式提供的,表示由浏览器综合各种样式设定后得出的结论。

 

计算样式可以通过document.defaultView.getComputedStyle()方法获取,该方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算样式。该方法接受两个参数,第一个目标元素,第二个是伪元素字符串(例如”:after”),可以是null,使用方法如下(仍以上面的html为例):

 

var ele = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(ele,null);
alert(computedStyle.width);//"100px"
alert(computedStyle.backgroundColor);//"red" | "rgb(255,0,0)" 等(看浏览器实现)
alert(computedStyle.border);//在某些浏览器中可能是"1px solid black"
computedStyle.width = "200px";//错误

 上面对于css中用短线(‘-’)连接的属性无法直接访问,需要通过Pascal命名规范来访问,不过有些属性无法访问(稍后介绍)。其中border由于是复合属性所以部分浏览器中无法访问,不过可以使用相应的borderTopWidth等细化属性来访问。最后引发错误是因为计算样式是只读的。如果需要修改样式貌似只能通过DOM元素的style属性进行修改。

但是上面的实现有一个bug,就是IE不支持getComputedStyle()方法,不过IE给每个拥有style属性的元素实现了currentStyle(CSSStyleDeclaration对象)属性,可以获取到计算样式。使用方法更简单:

 

//将上面的document.defaultView.getComputedStyle(ele,null)改为:
var computedStyle = ele.currentStyle;

 

 不过对于css中的float属性,由于JavaScript将float作为保留字,所以不能将其用作属性名,因此有了替代者,在IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。所以基于兼容性的考虑可以将样式操作改为如下形式:

 

//element:需要获取样式的目标元素;name:样式属性
function getStyle(element,name){
  var computedStyle;
  try{
    computedStyle = document.defaultView.getComputedStyle(element,null);
  }catch(e){
    computedStyle = element.currentStyle;
  }
  if(name != "float"){
    return computedStyle[name];
  }
  else{
    return computedStyle["cssFloat"] || computedStyle["styleFloat"];
  }
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element,name,value){
  if(name != "float"){
    element.style[name] = value;
  }
  else{
    element.style["cssFloat"] = value;
    element.style["styleFloat"] = value;
  }
}

 上面的代码可以跨浏览器实现操作某个元素的css。当然你可以使用jQuery的css(name,value)函数来更方便的实现以上操作。

 

 

[转自:http://binbinliao.com/programming/javascript-css-element.html]

分享到:
评论

相关推荐

    JavaScript 操作CSS类

    JavaScript是Web开发中不可或缺的一部分,尤其在操作页面样式方面,其强大的能力使得动态改变CSS类变得轻而易举。在本文中,我们将深入探讨如何利用JavaScript来操作CSS类,为网页添加交互性和动态效果。 首先,...

    移除html元素的某个css属性

    特别是在JavaScript与CSS的交互过程中,如何有效地控制元素的样式变得尤为重要。本文将深入探讨如何正确移除HTML元素上的某个CSS属性,包括为何简单地将其设置为空可能无法达到预期效果,以及推荐的做法。 #### 为...

    JavaScript动态生成css

    CSSOM是CSS对象模型,它允许JavaScript操作CSS样式。通过CSSOM,我们可以获取、修改和添加CSS选择器。例如: ```javascript let rule = style.sheet.cssRules[0]; rule.selectorText = '.anotherClass'; rule.style...

    JavaScript&JQuery&CSS&CSS等等DIV实例大全.zip

    JavaScript,jQuery,CSS以及CSS3是网页开发中的核心技术,它们共同构建了丰富的用户体验和美观的网页设计。这个压缩包文件“JavaScript&JQuery&CSS&CSS等等DIV实例大全.zip”显然是一个包含各种示例和教程的集合,...

    Javascript,Html,Css,Frame框架整合的菜单样式

    在创建可收缩的左侧菜单时,CSS可以设置元素的显示方式,如`display:none`隐藏菜单,`display:block`显示菜单。通过JavaScript来控制CSS类的切换,实现菜单的展开和收起效果。 例如: ```css .left-menu { display...

    万年历原代码(JavaScript+Jquery+CSS)

    在万年历组件中,jQuery使得选择和操作HTML元素变得更加简单,例如,用`$("#elementId")`选择器可以轻松获取或改变某个元素的状态。jQuery还提供了一系列的动画方法,如`.fadeIn()`和`.slideToggle()`, 可用于创建更...

    JavaScript驾驭网页-CSS与DOM_.docx

    总结来说,JavaScript通过DOM提供了对网页内容的强大控制,能够动态改变CSS样式、创建和操作HTML元素,从而实现丰富的用户交互和动态效果。了解并熟练掌握这些技能,对于任何前端开发者都是至关重要的。在实际应用中...

    Html+css+JavaScript实现的3D球面标签云效果

    如果没有使用专门的3D库,我们也可以直接操作DOM元素的样式,通过定时器更新CSS3的变换值,模拟3D动画。 在实际项目中,可能还需要考虑以下几点: 1. **响应式设计**:确保标签云在不同设备和屏幕尺寸上都能良好...

    css.zip_javascript

    JavaScript可以通过`document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()`等方法选取DOM元素,这些选取的元素可以是CSS选择器的一部分。通过获取到元素,我们可以改变它们的CSS...

    CSS 2.0 中文手册.rar_JavaScript 2.0_css_css 2.0_javascript

    - CSS 2.0引入了绝对定位(`position: absolute`)和相对定位(`position: relative`),使得元素相对于其父元素或文档的定位更精确。 - 引入了浮动(`float`)属性,用于创建多列布局,但同时也引入了清除(`...

    HTML+CSS+JAVAscript详细手册

    它不仅可以操作DOM(Document Object Model)进行动态内容更新,还能处理用户事件、执行AJAX(异步JavaScript和XML)请求,实现页面与服务器的无刷新通信。在最新的ECMAScript 6(ES6)版本中,JavaScript引入了类...

    javascript 进阶篇2 CSS XML学习

    JavaScript进阶篇通常会包括更高级的JavaScript知识和技巧,而CSS的学习则侧重于如何设计和实现网页的视觉和布局效果。XML(Extensible Markup Language,可扩展标记语言)则是一种用于存储和传输数据的标记语言,它...

    html、CSS、JavaScript

    它涵盖了黑马程序员视频教程中的前端核心知识,可以帮助你巩固对HTML标签的运用,CSS选择器和布局技巧,以及JavaScript的基本语法和DOM操作。通过复习这些笔记,你可以加深理解,检查自己在某个知识点上的掌握程度,...

    HTML+CSS+JavaScript原生购物网站首页案例

    这些交互元素可以通过JavaScript添加动态效果,如验证表单输入、显示/隐藏元素、添加动画等。 8. **数据模拟**:在学习案例中,可能会使用假数据(JSON格式)来模拟商品信息,通过JavaScript动态加载到页面上,以...

    JavaScript+css实现拖拽效果

    本文将详细讲解如何使用JavaScript和CSS来实现这一效果,以创建一个可拖拽的元素并处理其在页面上的位置。 首先,我们需要理解JavaScript在拖放功能中的角色。JavaScript提供了`dragstart`、`drag`、`dragend`以及`...

    JavaScript操作HTML元素和样式的方法详解

    在JavaScript中,可以使用`document.getElementById("元素ID")`方法获取页面上的元素,然后通过元素的`style`属性来访问和修改其CSS样式。`style`属性是一个对象,可以接收具体的样式属性名和值,如`element.style....

    css与javascript教程

    例如,避免在DOM操作时大量重绘和回流,可以通过CSS预处理器(如Sass、Less)编写可维护的CSS,并利用JavaScript库(如Lodash)来优化代码。同时,使用异步加载和模块化(如ES6模块或CommonJS)可以使JavaScript资源...

    javascript+css 实现的web tab

    在本项目中,“javascript+css实现的web tab”是一个利用JavaScript和CSS技术创建的Web Tab组件。这个组件能够帮助开发者在网页上构建具有美观外观和交互效果的标签页。 首先,我们来探讨CSS在这个项目中的作用。...

    javascript实现动态加载CSS.docx

    1. **预加载**:如果预测到用户可能会访问某个CSS,可以在他们交互之前预先加载。 2. **媒体查询**:使用媒体查询(`media`属性)来有条件地加载CSS,例如针对不同设备或屏幕尺寸。 3. **加载优先级**:确定CSS文件...

    HTML_CSS_JavaScript网页制作(新).pdf

    - onDblClick事件是一个JavaScript事件,它在用户双击某个元素时触发,开发者可以在这个事件中编写脚本以响应用户的双击动作。 - 背景图像和背景颜色是指CSS属性中的background-image和background-color,它们可以...

Global site tag (gtag.js) - Google Analytics