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

Chrome（12+）中获取透明度(opacity)返回字符串不同于其它浏览器

 
阅读更多

获取计算后的元素样式，IE有currentStyle，而标准浏览器用getComputedStyle。IE9后也支持getComputedStyle了。发现以前写的css方法不好用了，在chrome中返回的结果与其它浏览器不同。

如下

<!DOCTYPE HTML>
<HTML>
 <HEAD>
	<meta charset="utf-8" />
	<title>css opacity</title>
	<style type="text/css">
		div {
			background: gold;
			margin: 10px;
		}
		
		#d2 {
			opacity: 0.2;
			width : 250px;
		}
	</style>
 </HEAD>

 <BODY>
<div id="d1" style="opacity:0.1;width:200px;">d1</div>
<div id="d2">d2</div>

<button onclick="test()">getOpacity</button>

<script type="text/javascript">
	var d1 = document.getElementById('d1');
	var d2 = document.getElementById('d2');

	function test() {
		var sty1 = window.getComputedStyle(d1, null),
		sty2 = window.getComputedStyle(d2, null);
		
		alert(sty1.opacity);
		alert(sty2.opacity);
	}
</script>
 </BODY>
</HTML>

 

两个div：d1和d2。样式分别写在  style属性和css  中，透明度分别是0.1，0.2。都通过  getComputedStyle 方式获取opacity。点击按钮，Chrome中如下

 

而  IE9/Firefox/Safari/Opera 弹出的分别是0.1，0.2。Chrome返回的字符串长度是19，其它浏览器都是3。

jQuery的css方法也存在这个问题。 注意！

  • 大小: 12.9 KB
  • 大小: 15 KB
分享到：
| 各浏览器对focusin/focusout事件的支持差异
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AE层中的Opacity透明度.pdf

    在Adobe After Effects（AE）这款强大的视觉特效和动态图形软件中，Opacity（透明度）是控制图层可见度的关键参数之一。它允许用户调整层上元素的不透明度，从而创造出丰富的视觉效果，如淡入淡出、遮罩、混合等。在...

    CSS透明度定义

    本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 #### CSS透明度基础概念 透明度是指一个对象或图像能够透过其自身显示背景的程度。在CSS中，可以通过`opacity`属性...

    CSS3中的Opacity多浏览器透明度兼容性问题

    在CSS3中，`opacity`属性用于设置元素的透明度，允许你控制元素及其所有子元素的不透明度。这是一个非常有用的功能，但遗憾的是，并非所有浏览器都原生支持CSS3，尤其是较早的版本。这就导致了在不同浏览器间实现...

    asp.net中文水印透明度

    在处理中文水印时，透明度的调整显得尤为重要，因为中文字符的复杂性可能导致与背景或其他元素的冲突，从而影响用户体验。 在ASP.NET中实现中文水印透明度，我们可以使用多种方法。一种常见的方式是利用HTML5的`...

    Leaflet.Control.Opacity控制图层的透明度

    Leaflet.Control.Opacity 组件设置一个图层或者多个图层的透明度，支持浏览器：- Chrome、- Firefox、 - Safari。 安装方法：npm install leaflet.control.opacity，main.js ```javascript // CSS import import ...

    JavaScript动态控制图片透明度的变化.rar

    因此，如果只想改变某个子元素的透明度而不影响其他元素，可以使用CSS3的`rgba()`函数或`opacity`的子属性`filter: alpha(opacity=xx)`（适用于旧版IE）。 接下来，我们可以通过JavaScript获取到HTML中的图片元素，...

    详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    本文将深入探讨CSS的透明度属性`opacity`以及针对IE浏览器的滤镜`filter`的使用方法，确保在不同浏览器间实现一致的透明效果。 `opacity`属性在CSS3中被引入，允许我们设定一个元素的总体透明度，取值范围从0到1。...

    javascript层透明度

    - `filter: alpha(opacity=100)` 和 `opacity: 1`: 分别是IE和其他现代浏览器的CSS属性，用来设置初始的透明度为100%。 ##### 3. JavaScript函数 ```javascript function setOpacity(ID, VALUE) { E = document....

    多个浏览器透明度设置

    不同的浏览器可能采用不同的渲染引擎和技术标准，因此为了确保网页在不同浏览器中的兼容性和一致性，需要了解并掌握多种透明度设置的方法。 #### 核心知识点详解 1. **CSS3 `opacity` 属性** - **语法**：`...

    前端不同浏览器兼容性解决办法

    2. reset.css 或 normalize.css：每个浏览器对默认样式处理不同，引入reset.css或normalize.css可以消除浏览器默认样式带来的差异，使页面在不同浏览器中表现一致。 3. Box Model：IE与其他浏览器对Box Model的处理...

    CSS 图像透明度opacity兼容性介绍

    如果只想改变图像本身的透明度，可以使用CSS3的`background-image`结合`rgba()`颜色函数，或者使用`&lt;img&gt;`标签的`opacity`，但这种方法仅适用于背景图像，不会影响到元素内的其他内容。 总之，CSS的`opacity`属性是...

    jQuery可变透明度返回顶部

    在这个"jQuery可变透明度返回顶部"的案例中，我们将探讨如何利用jQuery来创建一个具有透明度变化效果的返回顶部按钮。 首先，我们需要在HTML中添加一个用于返回顶部的元素，通常是一个固定在屏幕底部或侧边的按钮。...

    Winform 使用 WPF控件 设置图片透明度样例

    在本文中，我们将深入探讨如何在Winform应用中利用WPF控件来设置图片的透明度。这是一项技术性较强的任务，涉及到C#编程语言、Winform与WPF的混合使用，以及图形处理中的透明度调整。让我们逐一解析这些关键知识点。...

    div透明度

    本文将深入探讨如何通过CSS来设置`div`的透明度，并解释两种常用的方法：`filter`属性（特别是IE浏览器中的`alpha`滤镜）以及现代浏览器广泛支持的`opacity`属性。 #### 1. 使用`filter`属性设置透明度 `filter`...

    透明层 解析 跨浏览器实现

    透明层是指一种具有透明度的元素，可以被放置于网页中的任意位置，常用于实现模态框、弹窗等交互效果。通过设置不同的透明度，可以达到不同的视觉效果。 **应用场景：** 1. **模态对话框：** 当用户执行某个操作时...

    详解css透明度之rgba和opacity的区别及兼容

    在CSS中，设置元素透明度有两种主要方法：rgba和opacity。两者都能达到让元素变得半透明的效果，但在使用上存在一些关键的区别。 首先，我们来看opacity属性。opacity属性用于设置整个元素（包括其内容和子元素）的...

    CSS拓展案例，包含定位，光标，圆角边框，透明度opacity,边框合并，焦点伪类选择器，属性选择器

    4. **透明度（Opacity）**：`opacity`属性用来调整元素的整体透明度，值范围从0（完全透明）到1（完全不透明）。例如，`opacity: 0.5;`会让元素变为50%的透明度。需要注意的是，这会影响元素及其所有子元素。 5. **...

    css中使用rgba和opacity设置透明度的区别（附图）

    在CSS中，设置元素透明度的方法主要有两种：RGBA和opacity。两者都能实现透明效果，但它们之间存在一些关键差异，这些差异在实际开发中需要特别注意。 1. RGBA（Red, Green, Blue, Alpha） RGBA颜色值允许我们指定...

Magicbox
Global site tag (gtag.js) - Google Analytics