文章源自:http://viralpatel.net/blogs/setting-opacity-of-html-element-using-javascript/
Setting opacity of html element using Javascript
You must have seen the blur effect of html elements like table, div where the opacity of these elements are slowly made to transparent or opaque. This can be acheived through javascript.
Internet Exlporer supports a CSS attribute called filter
, wherein you can apply lot of different filter options available in browser. There are currently three categories of filters – Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities.
Hence following code can be used to set opacity of an html element in IE.
var opacityValue = 0.5; //make it 50% opaque myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE
But the above code will not work with other browsers like Firefox, Opera etc. Firefox supports another CSS property called opacity
which controls the opacity of an element.
Following javascript function will set the opacity of any html element irrespective of the browser.
function setOpacity (myElement, opacityValue) { if (window.ActiveXObject) { myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE } else { myElement.style.opacity = opacityValue; // Gecko/Opera } }
相关推荐
标题 "Simple Drop Down Clock Using HTML JavaScript" 描述了一个利用HTML和JavaScript实现的简单下拉时钟项目。这个项目的核心在于将HTML用于构建用户界面,JavaScript则用于动态更新时间,为用户提供一个可下拉...
标题中的“Transparent pop-up link with description using JavaScript and CSS”指的是使用JavaScript和CSS技术实现的一种透明弹出式链接,这种链接在被点击时会显示详细描述。这种设计常见于网页交互元素中,为...
50% { opacity: 0; } } ``` 这段代码设置了红色霓虹效果,通过多个text-shadow属性模拟光线的散射,同时使用`@keyframes`定义了一个名为`blink`的动画,使得文本闪烁。 然而,这个静态的CSS效果并不能完全模拟...
本项目利用HTML、JavaScript技术实现了这一功能,下面将详细介绍其中的关键知识点。 1. HTML结构: 轮播图的基础是HTML布局,通常包含一个容器元素和多个图片(或内容)的子元素。每个子元素代表一张轮播图的幻灯片...
### Prototype Cheat Sheet 1.6.0.2 #### Event - **`element(event)`**: Returns the target element of an event. ...- **`setOpacity(element, opacity)`**: Sets the opacity of an element.
8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 定位相关属性 255 9.3 轮廓相关属性 257 9.4 ...
windowElement.style.opacity = transparency; windowElement.style.backgroundColor = 'rgba(255, 255, 255, ' + transparency + ')'; }); ``` 以上代码实现了一个基本的JavaScript半透明窗体,用户可以拖动窗口...
windowElement.style.opacity = 0.5; // 设置为50%的透明度 ``` - 使用jQuery: ```javascript $('#prettyWindow').css('opacity', 0.5); // 同样设置为50%的透明度 ``` 你还可以添加事件监听器,比如点击...
JavaScript小贴士要点 在网页开发中,JavaScript是一种不可或缺的语言,它赋予了页面动态交互的能力。本篇将探讨几个实用的JavaScript小贴士,帮助开发者更高效地利用JS来提升用户体验,尤其是创建类似小贴士的功能...
CSS3的`opacity`属性和JavaScript可以配合实现: ```javascript function fadeIn(element) { var op = 0.1; // opacity从0开始 var timer = setInterval(function() { if (op >= 1){ clearInterval(timer); ...
在JavaScript中,动态控制图片的透明度变化是通过操作CSS中的`opacity`属性来实现的。这个过程涉及到JavaScript基础、DOM操作以及CSS样式调整。在本案例中,我们主要探讨如何利用JavaScript对HTML中的图片元素进行...
element.style.opacity += opacityIncrement; } else { clearInterval(intervalId); } }, 10); } function fadeOut(element, duration) { element.style.opacity = 1; var opacityDecrement = 1 / (duration...
本项目是一款基于HTML、CSS与JavaScript技术构建的情人节表白网页,旨在为用户提供一个个性化且创意十足的方式向心仪之人表达爱意。通过这款网页,用户不仅能够自定义文本、图片以及背景音乐等内容,还能借助于丰富...
element.style.opacity = '0.5'; // 0为完全透明,1为完全不透明 ``` 3. **DOM元素操作**:首先,我们需要获取图片元素,并可能需要创建一个新的元素来显示半透明文字。这可以通过`document.getElementById`、`...
JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在创建交互式用户界面方面表现出色。在"JavaScript 清爽简洁的图片交替导航效果.rar"这个压缩包中,我们很可能会找到一个实现动态图片切换功能的代码示例...
if (element.style.opacity > 0) { element.style.opacity -= step; } else { clearInterval(intervalId); element.style.opacity = 1; // 隐藏后恢复原状,以便下次渐显 } }, 50); } function fadeIn...
HTML和JavaScript结合实现轮播效果是网页动态设计中常见的需求,尤其在展示产品或服务时,轮播图能够高效地展示多张图片或信息。在这个项目中,我们使用HTML作为结构,JavaScript处理交互逻辑,CSS负责样式设定,来...
jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。它的语法简洁明了,使得开发者能够快速地实现各种动态效果。 要实现弹跳效果,我们需要利用jQuery的`animate()`函数...
element.setOpacity(opacity); }, function() { // 结束回调,可以在这里添加额外操作 }); }; ``` 接下来,我们可以扩展这个库,添加更多效果,如滑动、旋转等,并确保所有效果都能平滑过渡,支持暂停、恢复和...
element.style.opacity = opacity; } }, 5); } ``` 5. **过渡效果**:利用CSS3的`transition`属性结合JavaScript可以创建平滑过渡。JavaScript改变某个属性,CSS负责过渡动画的执行。 6. **响应式设计**:...