js操作元素透明度以及浏览器兼容性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>透明度</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    #div1{width:200px;height:200px;background: red;filter:alpha(opacity:30);opacity: 0.3;}
</style>
<script>
    window.onload=function(){
        var oDiv=document.getElementById(‘div1‘);
        oDiv.onmouseover=function(){
            movestar(100);
        }
        oDiv.onmouseout=function(){
            movestar(30);
        }
    }
    var timer=null;
    var alpha=30;
    function movestar(iTarget){
            var oDiv=document.getElementById(‘div1‘);
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(alpha<iTarget){
                    speed=10;
                }else{
                    speed=-10;
                }
                if(alpha==iTarget){
                   clearInterval(timer);
               }else{
                alpha+=speed;
                oDiv.style.filter=‘alpha(opacity:‘+alpha+‘)‘;
                oDiv.style.opacity=alpha/100;
               }
            },30)
        }
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
时间: 2024-10-09 10:26:30

js操作元素透明度以及浏览器兼容性的相关文章

Threejs 官网 - 检测使用 three.js 时的 WebGL 和浏览器兼容性(Detecting WebGL and browser compatibility with three.js)

检测使用 three.js 时的 WebGL 和浏览器兼容性(Detecting WebGL and browser compatibility with three.js) 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章

js操作元素样式

样式表有外部样式表.内部样式表.行内样式. js改变css样式也是有三种.针对于外部样式表如果不采用后台技术,只是单纯的用js是不能实现的.所以下面只讨论两个方法. 一.js改变内部样式 其操作方法和一般标签一样,给style标签加一个类名或id,然后js中获取该元素,向里面添加内容即可改变样式. 示例: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

js操作元素的样式

1.元素.style.属性='属性值' var div=document.getElementById('box') div.style.width='300px'; div.style.height='300px'; div.style.backgroundColor='red'; //css中有-的属性,在js中要改成驼峰命名法 2.div.style.属性     获取元素的样式 var div=document.getElementById('box') console.log(div.

Js操作DOM及获取浏览器高度以及宽度

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. childNodes 反回当前元素所有子元素

js 一个不得不注意的浏览器兼容性问题 进制转换

写几行JS代码 var num = '022'; alert(num+' '+parseInt(num)+' '+parseInt(num,10)); 不同的浏览器将会得到不同的结果在谷歌浏览器下的结果为 022 22 22在IE8下的结果为 022 18 22 原因是在IE8下,js解释器将022 解释为8位数了,所以以后要写成后面的那种形式

js操作元素className

Base.prototype.addClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))){ this.elements[i].className += ' ' + className; } } return this;

浏览器兼容性小记-DOM篇(二)

1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: 1 Node.ELEMENT_NODE 2 Node.ATTRIBUTE_NODE 3 Node.TEXT_NODE 4 Node.CDATA_SECTION_NODE 5 Node.ENTITY_REFERENCE_NODE 6 Node.ENTITY_NODE 7 Node.PROCESSING_INSTRUCTION_NODE

11-js操作元素

js操作HTML的元素属性: <html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/> <!-- js操作HTML元素属性学习: 获取元素对象 操作元素属性 获取: 元素对象名.属性名//返回当前属性的属性值.----固有 元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义 修改 元素对

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu