夜光带你走进前端工程师（二十二 jS ）-优快云博客

博客主要围绕JS展开，介绍了JS控制web中结构、样式和行为的方法，以CSS和JS写样式为例，讲解了通过getElementById获取元素并修改样式。还阐述了变量及其作用域，包括变量声明规则、全局变量和局部变量，强调局部变量优先级高于全局变量，以及隐式全局变量的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

夜光序言：

西风瘦马浪迹天涯

执剑持酒尽显潇洒

正文：

JS 控制样式

我们就JS主要目的：控制 web 中的前两种

结构

样式

行为

CSS怎么写样式就是用div 语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #demo{
            width:100px;
            height:100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="demo">

</div>
</body>
</html>

现如今用JS来写

怎么写？嘿嘿

我们班36仁，我想要提问某个同学问题，夜光怎么做？

首先我点名字，找到这个同学，在提问

首先找人，找准对象

我们前面学过：div 一类人 span 都是

类名好多个

ID永远唯一 // 不会冲突唯一的那个元素

<div id="demo"></div>

<script>
document.getElementById("demo");
</script>

getElementById //理解这个含义，获得元素通过id

因为这个div 是在文档中，文档中很多个div其中的一个，所以我们先document

document.getElementById("demo").style.width="210px";

// 文档的id为demo的样式的宽度值为210px

举一反三：

<div id="demo"></div>

<script>
    document.getElementById("demo").style.width="210px";
    document.getElementById("demo").style.height="210px";
    document.getElementById("demo").style.backgroundColor="aqua";
</script>

//注意backgroundcolor 中间没有横线在JS 中用这种方法

变量及其作用域：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="black"></div>      // 注意这个是ID
<script type="text/javascript">
    var obj=document.getElementById("black");           // 注意这个是ID
    obj.style.width="200px";
    obj.style.height="200px";
    obj.style.backgroundColor="red";
</script>

</body>
</html>

<body>
<script>
    var num=10;
    var num=20;
    var num=30,num1=40;
                              // 如何申明变量
</script>
</body>

Var 2s [错误不可以数字开头]

var 0bj=123; //这是错误的 0？不可以

Var _变量=NAN; 可以的

单引号双引号完全相同除非嵌套

var aa="夜光";
var bb='夜光';

// 一样的

变量作用域：全局变量局部变量

<script>
    var num=10;
    function fn(){
        console.log(num);
    }
    fn()

</script>

// 这就是一个全局变量例子， var num=10;这个语句在function外边，你懂的

全局变量：

1：在最外申明的变量

2:在函数体内部，但是没有申明var的

<script>
    var num=10;
    function fn(){
        console.log(num);
        result=11;
    }
    fn()
    console.log(result);
</script>