zoukankan      html  css  js  c++  java
  • javascript内嵌样式与外联样式怎么做?

    对于前端初学者,个人JS样式常用的有两种:内嵌样式 ,外联样式;下面通过一个简单的鼠标点击出现设定的验证数字为例进行演示;

    先看下效果:

    鼠标点击前效果:

    鼠标点击后效果:

     图中的这个ojbk是我js函数设定的

    下面展示我的js的内嵌样式:

    我的内嵌js代码:

    <script>  //内嵌样式
            function random()
            {
                document.getElementById("random").innerHTML = "ojbk";
            }
    </script>

    html中调用js内嵌样式代码:

     <button type="button" onclick="random()" class="buttonstyle1">点击验证</button>

    下面展示我的js的外联样式:

    我的外联js样式表代码:

    文件内容:

    function random()
    {
        document.getElementById("random").innerHTML ='ojbk';
    }

    在HTML中引入js外联代码(放在head标签中,对整个页面起作用):

    <head>
        <meta charset="UTF-8">
        <title>简易验证码</title>
        <script type="text/javascript" rel="script" src="javascript.js"></script> //此处注意你的js文件的相对路径
    </head>

    HTML调用外联js代码:

    <button type="button" onclick="random()" class="buttonstyle1">点击验证</button>

    注释:这个其实和上面那个HTML中调用的代码是一样的!

    注意:在实训中,要注意你的js文件的相对路径,路径错误将无法调用!!!  JS的调用和CSS很相似。

  • 相关阅读:
    bash shell if 命令参数说明
    Linux test命令
    javascript获取事件触发源
    PHP Manual 学习
    js 控制iframe 刷新
    WP7交互特性浅析及APP设计探究
    FirstDayStart点点
    关于Safari的思考(转载)
    如何使控件背景色支持TransparentKey(at Win2k/WinXP 32bit Color Desktop)
    [Bug] VisualStyleRenderer may cause GDI leak!
  • 原文地址:https://www.cnblogs.com/bokemoqi/p/12813258.html
Copyright © 2011-2022 走看看