`
zhangyaochun
  • 浏览: 2595883 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

关于cssText的差异

阅读更多

其实很多人应该接触过cssText这个style对象的属性。

 

我们也先做一个测试吧。

 

 

<div id="test" style="height:200px;"></div>

 

 

var div = document.getElementById('test');
alert(div.style.cssText);

 

这段代码其实就是获取元素的样式。

 

结果在不同浏览器弹出的值是有差异的

 

  • IE6-8

  •  IE9 即各大高级浏览器

 
当然上面是单样式设置,我们可以看出两点
  • IE6-8 属性key大写,而且尾部不带;(分号)

我们再来看看一些复合属性
  • IE6-8


  • IE9 以及高级浏览器

  ---------- 像border这样的简写属性,在IE6-8下会被展开。



扩展阅读:



  • 大小: 9.6 KB
  • 大小: 9.9 KB
  • 大小: 28.1 KB
  • 大小: 12.8 KB
分享到:
评论

相关推荐

    js中用事实证明cssText性能高的问题.docx

    本文通过一个实际的测试案例探讨了使用`cssText`属性与单独设置样式属性之间的性能差异。 首先,我们要理解`cssText`属性。在JavaScript中,`element.style.cssText`是一个字符串,它允许我们一次性设置或获取元素...

    JavaScript中的style.cssText使用教程

    这主要是因为不同的浏览器在处理cssText属性时,内部的解析机制存在差异。因此,在使用cssText时,如果需要兼容多种浏览器,那么你可能需要考虑到这些细微的差别。 具体到如何使用style.cssText,我们通过一个例子...

    js中用事实证明cssText性能高的问题

    当处理大量元素的样式时,这种差异尤为显著,因为每次修改`style`属性都会触发浏览器的重绘或重排。 然而,需要注意的是,尽管`cssText`在大多数情况下表现更优,但并不意味着在所有场景下都是最佳选择。使用`...

    用cssText批量修改样式

    1. **兼容性**:`cssText` 在现代浏览器中已广泛支持,但在处理某些特定CSS属性时可能存在差异。开发者应确保测试兼容性,特别是在处理跨浏览器兼容性问题时。 2. **安全考虑**:由于 `cssText` 接收的是一个字符...

    仅在IE6/7/8下cssText返回值少了分号的测试代码

    在Web开发中,尤其是在处理CSS样式时,`cssText`属性是一个非常重要的工具。这个属性允许我们以字符串的形式获取或设置一个元素的样式信息。然而,不同的浏览器在实现这个属性时可能存在差异,其中IE6、IE7和IE8就是...

    动态创建样式表在各浏览器中的差异测试代码

    在这个场景下,我们关注的是不同浏览器间实现这一功能的差异,特别是与Internet Explorer (IE)浏览器相关的兼容性问题。 首先,让我们看一下提供的代码片段: ```html &lt;!doctype html&gt; &lt;head&gt;&lt;/head&gt; ...

    ajax中的IE和火狐的区别

    - Firefox同样支持此方法,但在IE中还提供了另一种方式:通过`object.style.cssText`直接设置样式,例如`object.style.cssText = 'color:red;'`。 - **插入DOM元素**: 将新创建的元素添加到文档树中时,`document....

    用JS实现网页元素阴影效果的研究总结

    这篇文章是关于如何使用JavaScript实现网页元素阴影效果的研究总结。作者在尝试为网页元素添加阴影时,发现需要处理浏览器之间的兼容性问题,特别是IE、Firefox、Opera等不同浏览器对CSS和JavaScript的支持差异。...

    开发跨浏览器的JavaScript方法说明第1/2页

    跨浏览器JavaScript开发是前端开发中的一个重要领域,主要是因为不同的浏览器存在差异性,导致相同的JavaScript代码在不同浏览器上可能表现出不同的行为。其中,IE浏览器由于历史原因,与现代浏览器如Firefox和...

    JavaScript样式.pdf

    以下是关于如何使用JavaScript修改元素外观的详细知识: 1. 修改ID: 虽然直接修改元素的ID通常不推荐,因为ID应该是唯一的,但有时为了某些特殊目的,我们可能需要这样做。改变ID可能会导致JavaScript或CSS选择器...

    前端程序员必需知道的高性能Javascript学问_.docx

    - **属性访问方式**:虽然使用点表示法(如`object.name`)和括号表示法(如`object["name"]`)在大多数浏览器中性能差异不大,但在Safari浏览器中,点表示法始终更快。 #### 二、循环优化 JavaScript中有多种循环...

    IE及firefox下获取及设置样式值的代码

    在JavaScript中处理CSS样式时,由于浏览器之间的差异,通常需要采取不同的方法。 首先,IE浏览器使用`currentStyle`对象来获取元素的样式。例如,如果你想要获取一个名为`div`的元素的`width`,在IE中可以这样写: ...

    开发跨浏览器JavaScript时要注意的问题

    spanElement.style.cssText = 'font-weight:bold;color:red;'; // 对于IE浏览器 spanElement.setAttribute('style', 'font-weight:bold;color:red;'); ``` #### 3. 设置元素的class属性 同样地,设置元素的class...

    document.styleSheets[0].rules 与 cssRules区别

    console.log("CSS Rule: " + document.styleSheets[0].cssRules[1].selectorText + ": " + document.styleSheets[0].cssRules[1].style.cssText); } else { console.log("Rule: " + document.styleSheets[0]....

    js弹出层可拖动兼容各大浏览器(20211002200327).pdf

    在创建弹出层时,使用`document.createElement`动态创建`DIV`元素,然后通过`setAttribute`和`style.cssText`设置其属性和样式。 4. **弹出层定位**: 弹出层的位置通过计算当前浏览器窗口的宽度和高度、滚动位置...

    JS修改css样式style浅谈

    在JavaScript中,修改CSS样式主要有三种方法:改变直接样式、改变className和改变cssText。每种方法都有其适用场景和注意事项。...在实际开发中,还需要不断积累和学习,以应对各种浏览器的差异和新的前端技术挑战。

    JavaScript封装对话框代替系统alert功能.pdf

    在实际的网页开发中,alert对话框的样式在不同浏览器中存在差异,且其UI设计较为单一,无法满足定制化的需求。因此,开发者常常选择自定义对话框来替代系统自带的alert。 在实现自定义对话框时,主要涉及到以下几个...

    开发跨浏览器javascript常见注意事项

    总结来说,跨浏览器的JavaScript开发需要注意不同浏览器的差异,尤其是在DOM操作、样式设置和属性处理等方面。通过使用适当的兼容性检查和针对特定浏览器的解决方案,可以确保代码在各种浏览器环境中都能稳定运行。

Global site tag (gtag.js) - Google Analytics