通过JS操作CSS

动态效果如图所示:

第一种实现方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript操作CSS:Style</title>
    <style type="text/css">
    li{
        font-size: 12px;
        color: #ffffff;
        background-image: url(images/bg1.gif);
        background-repeat: no-repeat;
        height: 33px;
        width:104px;
        text-align: center;
        line-height:38px;
        list-style:none;
        float:left;
    }
    </style>
    <script type="text/javascript">
        function changeBg1(currObj){
            //style="background-image:url(images/bg2.gif)"
            //CSS  style属性 background-image属性
            currObj.style.backgroundImage="url(images/bg2.gif)";
            //JavaScript style对象  backgroundImage对象
            currObj.style.color="yellow";
            currObj.style.fontSize="20px"
        }
        function changeBg2(currObj){
            currObj.style.backgroundImage="url(images/bg1.gif)";
            currObj.style.color="#ffffff";
            currObj.style.fontSize="12px"
        }

    </script>
    </head>

    <body>
       <ul>
        <li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)" style="background-image:url(images/bg2.gif)">资讯动态</li>
        <li  onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">产品世界</li>
        <li onmouseover="changeBg1(this)" onmouseout="changeBg2(this)">市场营销</li>
       </ul>
    </body>
</html>

第二种实现方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>JavaScript操作CSS:Style</title>    <style type="text/css">    li{        font-size: 12px;        color: #ffffff;        background-image: url(images/bg1.gif);        background-repeat: no-repeat;        height: 33px;        width:104px;        text-align: center;        line-height:38px;        list-style:none;        float:left;    }    </style>    <script type="text/javascript">        //匿名函数        //页面加载完调用        window.onload = function(){            var liArr = document.getElementsByTagName("li");            for(var i=0; i<liArr.length; i++){                //动态绑定事件                liArr.item(i).onmouseover = function(){                    this.style.backgroundImage = "url(images/bg2.gif)";                    this.style.color = "yellow";                    this.style.fontSize = "20px";                }                liArr.item(i).onmouseout = function(){                    this.style.backgroundImage = "url(images/bg1.gif)";                    this.style.color = "#ffffff";                    this.style.fontSize = "12px";                }            }        }            </script>    </head>        <body>       <ul>        <li >资讯动态</li>        <li>产品世界</li>        <li>市场营销</li>               </ul>    </body></html>

第三种实现方法:(推荐)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript操作CSS:Style</title>
    <style type="text/css">
    li{
        font-size: 12px;
        color: #ffffff;
        background-image: url(images/bg1.gif);
        background-repeat: no-repeat;
        height: 33px;
        width:104px;
        text-align: center;
        line-height:38px;
        list-style:none;
        float:left;
    }
    .over{
        background-image:url(images/bg2.gif);
        color:yellow;
        font-size:20px;
    }
    .out{
         background-image:url(images/bg1.gif);
        color:#ffffff;
        font-size:12px;
     }
    </style>
    <script type="text/javascript">
        //通过js操作css
        window.onload = function(){
            var liArr = document.getElementsByTagName("li");
            for(var i=0; i<liArr.length; i++){
                //动态绑定事件
                liArr.item(i).onmouseover = function(){
                    this.className = "over";
                }
                liArr.item(i).onmouseout = function(){
                    this.className = "out";
                }
            }
        }

    </script>
    </head>

    <body>
       <ul>
        <li class="">资讯动态</li>
        <li>产品世界</li>
        <li>市场营销</li>
       </ul>
    </body>
</html>
时间: 2024-10-04 18:57:22

通过JS操作CSS的相关文章

js操作css样式和class

Javascript 操作 Style document.getElementById("id1").style.fontFamily = "Geneva"; document.getElementById("id1").style.fontSize = "14px"; 注意:CSS 属性自身是 camelCased 的大小写是驼峰式的,即第一个词的首字小写,随后的每个词首字大写,而不是用连字符“-”进行连接的;如 利用Jav

JavaScript第一讲之js操作css

原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容. 需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr

js操作css类

经常会使用js动态设置css类,两种方法. 1.className className是包含所有类的字符串,所以添加删除类就像操作字符串一样就好. 添加类的话比较简单,直接 obj.className += ' active'; 记得加空格. 移除类,需要使用字符串replace函数. obj.className.replace(' active', ''); 如果直接这样写,你会发现没用!!!! 后来才发现,replace不改变原值,而返回值是替换后的值,所以需要这样: obj.classNa

使用JS动态操作css的集中方法

内联样式 在咱们深入一些复杂的知识之前,先回来顾一下一些基础知识.例如,咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式. const el = document.createElement('div') el.style.backgroundColor = 'red' // 或者 el.style.cssText = 'background-color: red' // 或者 el.setAttribute('style', 'background-color:

Javascript动态操作CSS总结

一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamil

JS控制css float属性的用法经验总结

JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.如:obj.style.marginTop,obj.style.borderLeftWidth,obj.

1113Js操作CSS样式

1.Js操作css样式 Div.style.width="100px".在div标签内我们添加了一个style属性,并设定 了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. 我们没有让css和html分离. 所以如果是为了获取css样式 window.getComputedStyle() 获取经过计算机计算的所有属性 就是只要渲染出来的都是经过计算的. getComputedStyle()第一个参数是当前元素,第二个一般我们写null 并且这个方法是只读,

js操作bom和dom

Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心. BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 窗口高度 var  a  = window.innerheight 窗口宽度 var a = window.innerwidth 打开一个新的页面 open

操作css样式【js】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ti