美文网首页
JavaScript修改样式

JavaScript修改样式

作者: Leophen | 来源:发表于2018-12-03 15:28 被阅读0次

(dom的innerHTML和className属性)

实现效果:


582bfb8f0001c8e703060070.jpg

附上代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <style type="text/css">
    .red{color:red;}
    </style>
</head>
<body>
    <h3>古文推荐</h3>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>三国演义</li>
        <li>聊斋志异</li>
        <li>论语</li>
        <li>孟子</li>
        <li>中庸</li>
        <li>大学</li>
    </ul>
    <script>
    
    var list=document.getElementsByTagName("li");
    
    for(var i=0;i<list.length;i++){
        
        list[i].innerHTML="第"+[i+1]+"名:"+list[i].innerHTML;

        if(i%2==0){

            list[i].className="red";
            
        }
        
    }
    
    </script>
</body>
</html>

注意:在显示第几名时,如果i+1不加中括号,会显示这种效果


582bfb8f0001c8e703060070.jpg

相关文章

  • tech notes

    前端: 修改input type = 'file'的默认样式 JavaScript 执行机制 WebSocket ...

  • JavaScript修改样式

    (dom的innerHTML和className属性) 实现效果: 附上代码: 注意:在显示第几名时,如果i+1不...

  • 初探JavaScript魅力

    JavaScript是什么? 网页特效原理 淘宝、新浪、报读 JavaScript就是修改样式 编写JS的流程 布...

  • 使用JavaScript动态更改CSS样式

    在很多情况下,都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式,下面将介...

  • iOS开发日记:WkWebView 图片自适应屏幕

    在webView 加载html Finish后,使用javaScript 修改image的样式,达到图片自适应屏幕...

  • JavaScript-2

    上一节主要简单的讲解了JavaScript修改CSS样式,这一节,我们来看看Javascript自身的属性,以及运...

  • 【前端】-031-DOM编程-样式操作

    CSS DOM概述 通过JavaScript语言,使用DOM对象接口,动态的修改CSS内容,到达对页面样式进行变更...

  • Swift-提示框(UIAlertController)使用

    样式一: 样式二 样式三(单独修改颜色 注:修改标题与内容失败待研究)

  • javascript开发文字修改样式

    知识点:for循环语句,字符串方法,进制转换,this指向问题,变量,数组方法,基本事件处理等。 ?html代码:...

  • Javascript基础简介

    1.javascript: 行内样式 ;内嵌样式 ;外链样式 2.使用javascript来输出一句话: 方式1...

网友评论

      本文标题:JavaScript修改样式

      本文链接:https://www.haomeiwen.com/subject/tqbycqtx.html