- 浏览: 311435 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (243)
- Core Java (13)
- Java (12)
- Android (2)
- Lucene (3)
- J2EE (3)
- Hibernate (2)
- Jsp & Servlet (3)
- Struts2 (3)
- Spring (5)
- JSF (6)
- RichFaces (2)
- HTML & JS & DOM & CSS (87)
- browser (1)
- Ajax & A4J (2)
- Workflow (1)
- Maven (3)
- Linux (2)
- VM & VBOX (1)
- Tomcat (1)
- Cache (3)
- Others (36)
- design (1)
- PHP (1)
- Try.js (1)
- HTML5 && CSS3 && ECMAScript5 (26)
- 疯言疯语 (5)
- mongodb (2)
- Hardware Common Sence (1)
- RESTful (3)
- Nginx (2)
- web安全 (8)
- Page Design (1)
- web performance (1)
- nodejs (4)
- python (1)
最新评论
-
New_Mao_Er:
求最新的版本破解啊!!!
Omondo eclipseUML插件破解 -
konglx:
讲得仔细,谢了
全面分析 Spring 的编程式事务管理及声明式事务管理 -
cilendeng:
对所有post有效只能使用过滤器
说说Tomcat的Server.xml的URIEncoding=‘UTF-8’配置 -
jiulingchen:
mark了,灰常感谢!
JAVA中最方便的Unicode转换方法 -
anlaetion:
这算法可以有
js 字符串搜索算法
需求分析
使用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]
发表评论
-
循环数组的逻辑怎么写
2015-03-23 10:24 643应用场景这样的: var imgUrls = [ ... -
发布`代码生成器`
2014-11-17 00:45 580闲话不说,直接上地址 npm: https://www. ... -
MutationObserver
2014-10-27 15:29 1090MutationObserver MutationObse ... -
a simple mvvm library - bird
2014-10-09 18:26 726see here:https://github.com/i ... -
遍历dom tree是一件相当耗时的事情
2014-09-23 01:15 752遍历dom tree是一件相当耗时的事情,尤其是在遍历的同时 ... -
今天再讲下js里的继承
2014-09-18 00:27 693js的继承说简单也很简单,请看: function ... -
Text 类型
2014-09-05 18:52 841文本节点由Text类型表 ... -
JavaScript插入动态脚本
2014-09-05 18:47 635动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该 ... -
innerHTML插入<style>元素
2014-09-05 18:37 1157通过innerHTML写入<style>元素没 ... -
CSS实现相对浏览器窗口定位彻底研究
2014-09-05 18:33 3718Web Developer / Designer 经常需要将 ... -
JavaScript插入动态样式
2014-09-05 18:07 604能够把CSS样式包含到HTML页面中的元素有两个。其中,& ... -
再理解jQuery;delete原型属性
2014-05-13 22:05 1855以前用jQuery的时候曾粗略看了它的源码,但却不求甚解。 ... -
javascript &&和||
2012-07-23 00:38 700一直以为 && 和 || ... -
undefined 和 void 0 的区别
2012-07-20 11:15 701在读backbone源码时看见这么一段代码: if ( ... -
Fiddler - 前端开发值得拥有
2012-07-16 14:41 825最近换了新工作,搬了新家,换了新室友,一切都在重新开始。 ... -
说说我的web前端之路,分享些前端的好书
2012-07-16 14:38 791WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没 ... -
JavaScript实现 页面滚动图片加载
2012-07-16 14:29 685又到了这个月的博客时间了,原计划是打算在这个月做一个的功 ... -
JavaScript 操作 Cookie
2012-07-16 11:18 682从事web开发也有些日 ... -
Javascript定义类(class)的三种方法
2012-07-12 12:35 584程序员们做了很多探索,研究如何用Javascript模拟”类” ... -
服务端解决跨源共享
2012-06-21 10:18 4514跨源资源共享是web开发领域中一个非常有趣的话题,互联网 ...
相关推荐
JavaScript是Web开发中不可或缺的一部分,尤其在操作页面样式方面,其强大的能力使得动态改变CSS类变得轻而易举。在本文中,我们将深入探讨如何利用JavaScript来操作CSS类,为网页添加交互性和动态效果。 首先,...
特别是在JavaScript与CSS的交互过程中,如何有效地控制元素的样式变得尤为重要。本文将深入探讨如何正确移除HTML元素上的某个CSS属性,包括为何简单地将其设置为空可能无法达到预期效果,以及推荐的做法。 #### 为...
CSSOM是CSS对象模型,它允许JavaScript操作CSS样式。通过CSSOM,我们可以获取、修改和添加CSS选择器。例如: ```javascript let rule = style.sheet.cssRules[0]; rule.selectorText = '.anotherClass'; rule.style...
JavaScript,jQuery,CSS以及CSS3是网页开发中的核心技术,它们共同构建了丰富的用户体验和美观的网页设计。这个压缩包文件“JavaScript&JQuery&CSS&CSS等等DIV实例大全.zip”显然是一个包含各种示例和教程的集合,...
在创建可收缩的左侧菜单时,CSS可以设置元素的显示方式,如`display:none`隐藏菜单,`display:block`显示菜单。通过JavaScript来控制CSS类的切换,实现菜单的展开和收起效果。 例如: ```css .left-menu { display...
在万年历组件中,jQuery使得选择和操作HTML元素变得更加简单,例如,用`$("#elementId")`选择器可以轻松获取或改变某个元素的状态。jQuery还提供了一系列的动画方法,如`.fadeIn()`和`.slideToggle()`, 可用于创建更...
总结来说,JavaScript通过DOM提供了对网页内容的强大控制,能够动态改变CSS样式、创建和操作HTML元素,从而实现丰富的用户交互和动态效果。了解并熟练掌握这些技能,对于任何前端开发者都是至关重要的。在实际应用中...
如果没有使用专门的3D库,我们也可以直接操作DOM元素的样式,通过定时器更新CSS3的变换值,模拟3D动画。 在实际项目中,可能还需要考虑以下几点: 1. **响应式设计**:确保标签云在不同设备和屏幕尺寸上都能良好...
JavaScript可以通过`document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()`等方法选取DOM元素,这些选取的元素可以是CSS选择器的一部分。通过获取到元素,我们可以改变它们的CSS...
- CSS 2.0引入了绝对定位(`position: absolute`)和相对定位(`position: relative`),使得元素相对于其父元素或文档的定位更精确。 - 引入了浮动(`float`)属性,用于创建多列布局,但同时也引入了清除(`...
它不仅可以操作DOM(Document Object Model)进行动态内容更新,还能处理用户事件、执行AJAX(异步JavaScript和XML)请求,实现页面与服务器的无刷新通信。在最新的ECMAScript 6(ES6)版本中,JavaScript引入了类...
JavaScript进阶篇通常会包括更高级的JavaScript知识和技巧,而CSS的学习则侧重于如何设计和实现网页的视觉和布局效果。XML(Extensible Markup Language,可扩展标记语言)则是一种用于存储和传输数据的标记语言,它...
它涵盖了黑马程序员视频教程中的前端核心知识,可以帮助你巩固对HTML标签的运用,CSS选择器和布局技巧,以及JavaScript的基本语法和DOM操作。通过复习这些笔记,你可以加深理解,检查自己在某个知识点上的掌握程度,...
这些交互元素可以通过JavaScript添加动态效果,如验证表单输入、显示/隐藏元素、添加动画等。 8. **数据模拟**:在学习案例中,可能会使用假数据(JSON格式)来模拟商品信息,通过JavaScript动态加载到页面上,以...
本文将详细讲解如何使用JavaScript和CSS来实现这一效果,以创建一个可拖拽的元素并处理其在页面上的位置。 首先,我们需要理解JavaScript在拖放功能中的角色。JavaScript提供了`dragstart`、`drag`、`dragend`以及`...
在JavaScript中,可以使用`document.getElementById("元素ID")`方法获取页面上的元素,然后通过元素的`style`属性来访问和修改其CSS样式。`style`属性是一个对象,可以接收具体的样式属性名和值,如`element.style....
例如,避免在DOM操作时大量重绘和回流,可以通过CSS预处理器(如Sass、Less)编写可维护的CSS,并利用JavaScript库(如Lodash)来优化代码。同时,使用异步加载和模块化(如ES6模块或CommonJS)可以使JavaScript资源...
在本项目中,“javascript+css实现的web tab”是一个利用JavaScript和CSS技术创建的Web Tab组件。这个组件能够帮助开发者在网页上构建具有美观外观和交互效果的标签页。 首先,我们来探讨CSS在这个项目中的作用。...
1. **预加载**:如果预测到用户可能会访问某个CSS,可以在他们交互之前预先加载。 2. **媒体查询**:使用媒体查询(`media`属性)来有条件地加载CSS,例如针对不同设备或屏幕尺寸。 3. **加载优先级**:确定CSS文件...
- onDblClick事件是一个JavaScript事件,它在用户双击某个元素时触发,开发者可以在这个事件中编写脚本以响应用户的双击动作。 - 背景图像和背景颜色是指CSS属性中的background-image和background-color,它们可以...