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很相似。

  • 相关阅读:
    中国马的跳法
    桃子到底有多少
    Precision power (高精度幂运算)(相乘的变体)
    判断两条线段是否相交
    大菲波数
    小数保留格式
    Java 注意事项
    KMP复习整理
    printf函数精讲
    再解 KMP(初学)
  • 原文地址:https://www.cnblogs.com/bokemoqi/p/12813258.html
Copyright © 2011-2022 走看看