mozilla
您的搜索结果

    JavaScript 与 CSS

    本文是 CSS tutorial 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 

    第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术,如果你想深入学习,可以查找具体的文档。

    换句话说,这些页面是用来向你展示CSS的多种用途的。通过这些页面,你不需要掌握其他技术就可以获取到很多CSS的相关知识。

    上一章 (Part I): Media
    下一章: SVG

    相关知识: JavaScript

    JavaScript是一种编程语言,它被广泛用来实现web站点和应用中的交互效果。

    JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式。 

    有三种方法可以实现这样的效果:

    • 控制样式表—可以添加、删除、修改样式表。
    • 控制样式规则—可以添加、删除、修改样式规则。
    • 控制DOM中的单个元素—可以不依赖样式表来修改元素样式。
    更多细节
    要了解 JavaScript的更多细节,可以到这个wiki JavaScript 。

    范例: 一个JavaScript的实例

    新建一个doc5.html的页面,把下面的代码复制粘贴进入,注意要保证保存了所有的代码:

    <!DOCTYPE html>
    <html>
    
    <head>
    <title>Mozilla CSS Getting Started - JavaScript demonstration</title>
    <link rel="stylesheet" type="text/css" href="style5.css" />
    <script type="text/javascript" src="script5.js"></script>
    </head>
    
    <body>
    <h1>JavaScript sample</h1>
    <div id="square"></div>
    <button>Click Me</button>
    
    </body>
    </html>
    

    新建一个CSS文件style5.css,复制粘贴下面的样式代码到文件中:

      #square {
    
          width: 20em;
    
          height: 20em;
    
          border: 2px inset gray;
    
          margin-bottom: 1em;
    
      }
    
      button {
    
          padding: .5em 2em;
    
      }

    新建一个JavaScript文件script5.js,复制粘贴下面的代码到文件中:

    // JavaScript demonstration
    var changeBg = function (event) {
        console.log("method called");
        var me = event.target
        ,   square = document.getElementById("square");
        square.style.backgroundColor = "#ffaa44";
        me.setAttribute("disabled", "disabled");
        setTimeout(function () { clearDemo(me) }, 2000);
    }
    
    function clearDemo(button) {
        var square = document.getElementById("square");
        square.style.backgroundColor = "transparent";
        button.removeAttribute("disabled");
    }
    
    var button = document.querySelector("button");
    button.addEventListener("click", changeBg);
    console.log(button);
    

    用浏览器打开HTML文件并点击按钮。

    这里有在线的示例:Here is the Live Example

    JavaScript demonstration

    JavaScript demonstration

    重要提示
    • HTML文档中外链了CSS文件和JavaScript文件。
    • 脚本直接修改了DOM元素的样式,通过修改属性值来改变按钮的样式。
    • 在JavaScript中document.getElementById("square") 在功能上同 CSS 选择器 #square的功能是类似的。
    • 在 JavaScript代码中, backgroundColor 对应于CSS 属性background-color。因为JavaScript中不允许在命名中出现中划线,所以采用了驼峰式,的写法来做替代。
    • 浏览器针对button有内置的CSS规则  button[disabled="true"] ,这会导致按钮在不可点击状态下的显示样式跟预期有出入。
    挑战
    修改脚本代码实现如下效果:当颜色改变的时候让方块跳至右侧20em的距离,然后再恢复到原来的位置。

    这里有一个解决方案示例:See a solution to this challenge.

    下一步做什么呢?

    如果你对本页内容有疑问,或者有其他想法,欢迎到 Discussion 页面进行讨论。

    在示例中,尽管只有button元素使用了脚本代码,但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展,让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明: XBL bindings

    文档标签和贡献者

    此页面的贡献者有: reygreen1, Chajn
    最后编辑者: Chajn,