Java教程

javascript

本文主要是介绍javascript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

初学js笔记

一、 获取HTML元素

var ele1 = document.querySelector('css选择器');//返回来的是满足条件的第一个元素！！！ 

ele1 获取回来的那个

document.querySelectorAll('css选择器') //返回来就是满足条件的所有元素，获取回来的是一个数组。

二、js触发事件js修改外部的类样式

1.事件

鼠标点击  onclick 

鼠标移入  onmouseover

鼠标移出  onmouseout

鼠标移动  onmousemove

键盘按下  onkeydown

键盘弹起  onkeyup

2.绑定事件

元素.事件类型  ele1.onclick 

3.事件处理的代码

元素.事件类型 = function(){

    //事件触发后要执行的代码！

}

4.js修改行内样式

元素.style.属性名 = 属性值;

不过js不支持-，像这种font-size类型的属性名写成  fontSize。

5.js修改外部的类样式

设置元素的类值为...   可将类名修改为双引号里的。

元素.className = ""

获取元素的类样式集合:

元素.className 

案例

    点击按钮可以增大减小字体。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box{

            width: 800px;

            margin: 50px auto;

            border: thick double #32a1ce;

        }

        button{

          /* 鼠标样式属性 */

            cursor: pointer;

            /* margin-top:px ; */

            position: absolute;

        }

        .reduce{

            margin-left: 50px;

        }

    </style>

    

</head>

<body>

    <div class="box" style="font-size: 20px;">MIME

        文本文件在MIME标准中的类型为“text/plain”，此外，它通常还附加编码的信息。在Mac OS X出现前，当Resource fork指定某一个文件的类型为“TEXT”时，Mac OS就认为这个文件是文本文件。在Windows中，当一个文件的扩展名为“txt”时，系统就认为它是一个文本文件。此外，处于特殊的目的，有些文本文件使用其它的扩展名。例如，计算机的源代码也是文本文件，它们的后缀是用来指明它的程序语言的。

    </div>

    <button class="increase" style="color: black;">放大</button>

    <button class="reduce" style="color: black;">缩小</button>

    <script>

        var x=20;

        var ele1= document.querySelector('.box');

        var ele2= document.querySelector('.increase');

        var ele3= document.querySelector('.reduce');

        ele2.οnclick=function(){

            ++x;

            ele1.style.fontSize=x+"px";

            ele2.style.color="bule";

            ele3.style.color="black";

        }

        ele3.οnclick=function(){

            --x;

            ele1.style.fontSize=x+"px";

            ele2.style.color="black";

            ele3.style.color="bule";

        }

    </script>

</body>

</html>

 

这篇关于javascript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航