前端学习笔记—使用JS修改样式

Posted 2023-04-04 岁月流年初雪又卷

---

目录

• • JS修改样式的九种方式
  • • 1.直接设置style的属性
    • 2.直接设置属性
    • 3.设置style的属性
    • 4.使用setProperty
    • 5.改变class （推荐）
    • 6.设置cssText
    • 7.引入css样式文件
    • 8.使用addRule、insertRule
    • 9、通过classList控制样式

---

JS修改样式的九种方式

1.直接设置style的属性

style属性可以设置或返回元素的内联样式,对于更改同一个元素的同一种样式，设置style属性的优先级较高

• 语法：element.style.property = value
• property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。

var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色 
box.style.marginLeft = "100px" // 将元素左外边距设置为100px 

某些情况用这个设置 !important值无效

如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式

element.style.height = '100px';

2.直接设置属性

只能用于某些属性，相关样式会自动识别

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

3.设置style的属性

element.setAttribute('style', 'height: 100px !important');

4.使用setProperty

• 如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5.改变class （推荐）

• 通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6.设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

7.引入css样式文件

• 创建引入新的css样式文件

 function addNewStyle(newStyle) 
            var styleElement = document.getElementById('styles_js');

            if (!styleElement) 
                styleElement = document.createElement('style');
                styleElement.type = 'text/css';
                styleElement.id = 'styles_js';
                document.getElementsByTagName('head')[0].appendChild(styleElement);
            
            
            styleElement.appendChild(document.createTextNode(newStyle));
        

        addNewStyle('.box height: 100px !important;');

8.使用addRule、insertRule

// 在原有样式操作
        document.styleSheets[0].addRule('.box', 'height: 100px');
        document.styleSheets[0].insertRule('.box height: 100px', 0);

        // 或者插入新样式时操作
        var styleEl = document.createElement('style'),
            styleSheet = styleEl.sheet;

        styleSheet.addRule('.box', 'height: 100px');
        styleSheet.insertRule('.box height: 100px', 0);

        document.head.appendChild(styleEl);

9、通过classList控制样式

• classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的

classList常用方法介绍：

名称	描述
add(class1, class2, …)	添加一个或多个类名
remove(class1, class2, …)	移除一个或多个类名
replace(oldClass, newClass)	替换类名
contains(class)	判定类名是否存在，返回布尔值
toggle(class, true|false)	如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false）

<div class="box">classList test</div>
<script>
  var box = document.querySelector('.box')
  box.classList.add('box1', 'box2')    // [box] => [box, box1, box2]
  box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
  box.classList.replace('box', 'box2')  // [box] => [box2]
  box.classList.contains('box1')  // 当前元素不包含类名box1，返回false
  box.classList.toggle('active')   // [box2] => [box2, active]
</script>

---

如果以上知识对你有用欢迎点赞和关注~ 谢谢~

---

javascript学习笔记全记录

 

js的初步了解

    1.就是用来修改样式的,修改的是行内样式。任何样式都能够修改。

    2.css里面怎么写js就怎么写。

    3.任何元素都能加事件；事件都要小写

js的三大组成部分：

1.ECMAScript——核心解释器，把js代码转换成计算机可以读懂的语言

2.DOM——Document  object model 文档对象模型

          增删改查文档节点

3.BOM——browser object model 浏览器对象模型

          完全不兼容

---

特别的问题：

 0、document.ready和document.load有什么区别？

      document.ready比onload要快，要先加载

          页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

 

 1.调用一个函数总是返回一个值，如果没有指定这个值则返回undefined;

 2.对象引用问题（Date,json,arr）

    var arr = [1,2];

var arr2 = arr;

arr2.push(5);

document.write(arr+‘<br />‘);//[1,2,5]

document.write(arr2);//[1,2,5]

---

js的数据类型：

     数字类型（number）,字符串（string）,布尔值（booleans），未定义（undefined），对象（object）

     基本数据类型：数字类型（number）,字符串（string）,布尔值（booleans），未定义（undefined）

     复合数据类型：对象（object）

---

数据类型转化：

     1.强制数据类型转化

          转整数：parseInt();

          转小数：parseFloat();

          弱转化：number();//严格转化

     2.隐式数据类型转化

          +：字符串拼接==》12+‘5‘=‘125‘;

          -*/%:字符串转数字==》‘12‘-5=7;

          ++:字符串转NaN==》var i=‘12‘;i++;typeOf(i)==‘number‘;    

---

函数：有返回值，返回值，返回值

函数返回值：

     1.函数没有返回值，返回undefined

     2.函数有return，但是没有值，返回undefined;

     3.return后面的代码不执行

     还有一个特殊的是 "函数function(){}"

          1.函数分定义阶段和调用阶段

          2.在哪里定义不重要，重要的是在哪里调用

          *3.只要函数名能出现的地方，都可以放函数本身

函数传参：

     函数不设置参数接收的话可以调取arguments[i]获取到参数

--------------

字符串：

     字符串定义： var i=0;

                var str=‘abc‘;

     *字符串拼接：

        var name = ‘leo‘;

    var age = 19;

    var hobby = ‘妹子‘;

    var you = ‘你‘;

    var str = you+‘是帅气的‘+name+‘，今年‘+age+‘岁，性别男，爱好‘+hobby;

---

操作样式的2种方法：

    .     方便灵活

   []能使用变量参数，点能做的它都可以做

---

循环：操作一组元素的时候使用

     ①条件循环

     while(i<5){

          执行语句；

          i++;

     }

当i不满足条件的时候的，循环自动终止；

     ②固定次数循环

     //循环5次

     for(var i=0;i<5;i++){

          执行语句；

     }

 

for循环小知识：

     continue        跳出当次循环

     break           阻断后面的循环

---

函数的作用域

1.全局变量=公用卫生间

2.局部变量=次卧卫生间

     局部变量 全局无法使用

     局部声明变量不加var的话就变成全局变量（不推荐使用）

     window.a=123;

3.闭包=次卧的可以用自己的卫生间，也可以用公用卫生间；

 

闭包：变量作用域

 

预解析（从上至下，从左至右）

     1、先把变量声明 全部提前，赋值不动

     2、函数也有预解析，直接提前

     3、预解析 不会脱离函数作用域，也不会冲出script标签 最多提到自己标签的顶部

代码执行顺序 见一个script解析执行一个，执行完了 在执行下一个

 

预解析的时候，函数和变量重名的时候，函数覆盖变量

执行代码的时候，有表达式的为大，会覆盖掉同名的函数值，最后读取变量的值；

var a=function(){

     alert(1);

};

function a(){

      alert(2);

}

     a();

预解析的时候a=function a(){alert(2)}

正常执行代码时候a=function(){alert(1)};覆盖了上面的值

所以弹1(表达式为大)

---

if语句和switch语句

     不适用break会导致case穿越，且不会报错

     switch(条件){

    case 条件可能的取值1:

        执行的语句1;

        break;

    case 条件可能的取值2:

            执行的语句2;

            break;

    default:

        默认的情况;

    break;

     }

 

     if(判断条件1){

          判断条件1成立执行 语句1

     }else if(判断条件2 ){

          判断条件2成立执行 语句2

     }else{

          以上判断条件都不成立的情况这条语句

     }

     

     if语句的简写形式：

          1.

          var a=500;

          if(a==500){

               alert(‘吃大餐‘);

          }

          可以简写成：a==500&&alert(‘吃大餐‘);

          2.三目运算符

          条件成立不？执行语句1:执行语句2;

---

运算符

算数运算符    +-*/%

赋值运算符    = += -= /= *= %=

比较运算符    <><= >= == === != !==(三等号：数据类型和值都完全相等的情况下才是true;)

逻辑运算符    &&  ||  ！取反

运算优先级    ()

---

return

     后面的代码不执行了

     用函数的返回值代替执行结果

---

定时器：

先开后关

     开启：setInterval(function(){}||fn,300);有返回值

     清除：clearInterval(定时器名);

     setTimeout(fn,300);

     clearTimeout(定时器名);

定时器的问题：

    1.循环里面加定时器，定时器里面用i 的问题

          用闭包解决

    2.定时器函数不能放括号

          否则会undefined;因为函数没有返回值，返回一个undefined

    3.定时器里面不能用this  当事件发生的时候先把this存下来，而不是在定时器里直接用this （定时器里面的this指向window）;

          在定时器外面：var _this=this;

    例子：

        延迟选项卡

     2.第一次起作用的时候要等一个定时器的时间；解决：封装成函数，先调用一次

---

日期对象：

     特殊用法：

          var oData=new Data(oData.getTime()时间戳);

          时间戳是毫秒数

          里面放置时间戳也可以获得，时间戳转化得来的时间

     获取日期对象：

     var oDate=new Date();

     var year=oDate.getFullYear();

     var month=oDate.getMonth()+1;小1

     var day=oDate.getDay();//获取星期(0，1，2，3，4，5，6)

     var date=oDate.getDate();

     var hour=oDate.getHours();

     var mintues=oDate.getMinutes();

     var seconds=oDate.getSeconds();

     oDate.getTime();获取时间戳

     设置日期对象：

     var oDate= new Date();

     oDate.setFullYear(2017,0,1);设置：年，月，日

     oDate.setHours(0,0,0,0);设置：时，分，秒，毫秒

     oDate.getTime();

经典案例：获取到本月最后一天是星期几？

    var arr=[‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘];

    var oDate=new Date();

    oDate.setMonth(oDate.getMonth()+1);//设置日期到下个月

    oDate.setDate(0);//获取到上个月的最后一天

    var week=oDate.getDay();

    alert(arr[week]);

---

数组常用方法：增，删，改，查     9

     var arr=[12,5,8];

     arr.push(0);向后添加==》arr=[12,5,8,0];

     arr.unshift(0);向前添加==》arr=[0,12,5,8];

     arr.pop();数组后删除一位==》arr=[12,5];

     arr.shift();数组前删除一位==》arr=[5,8];

     arr.join(‘-‘);数组连接成字符串==》‘12-5-8‘;

     arr.splice(‘开始位置‘,‘几位‘,‘元素‘);具备‘增删改’

          for(){}时候需要i--;

          增加：arr.splice(1,0,3);==》arr=[12,3,5,8];

          删除：arr.splice(1,1);==》arr=[5,8];

          修改：arr.splice(1,1,3);==》arr=[12,3,8];

     arr.reverse;数组反转==》arr=[8,5,12];

     arr.concat();数组连接

     arr.sort(function(n1,n2){

              return n1-n2; 由小到大的排序

              return n2-n1; 由大到小的排序

               n1n2可以是对象的某个具体属性值比较

     })

---

字符串常用方法：7

     var str=‘welcome to zhinengshe‘

     str.charAt(0);==>w  //查找位置范围相应字符 

     str.indexOf(‘e‘);==>1【UA检测】

     str.lastIndexOf(‘e‘);==>20【判断文件名】

     找到相对应的元素返回元素位置

     找不到元素的位置返回-1

     str.split(‘ ‘);分割成数组==》[‘welcome‘,‘to‘,‘zhinengshe‘];

     str.substring(‘开始位置‘,‘结束位置‘不包含结束位置);截字符串

     str.substring(0,1);==>‘w‘

     str.substring(0,str.length-1);把最后一个字母去掉

     str.toUpperCase();转成大写；

     str.toLowerCase();转成小写；

     str.charCodeAt(位置);返回指定位置的字符编码

     String.fromCharCode(字符编码);返回对应字符编码的字符

     str.replace(‘要更换的‘，‘更换的‘);

          注意：字符串的比较 其实就是编码大小的比较

---

Math的常用方法：9

     Math.round();四舍五入

     Math.random();获取0-1之间的随机数字，不包含1本身

     Math.floor();向下取整数

     Math.ceil();向上取整；

     Math.max();获取最大数字

     Math.min();获取最小数字；

     Math.abs();获取绝对值；

     Math.sqrt();幂

     Math.pow();开方

---

闭包（匿名函数自执行、封闭空间）变量作用域

    1.命名冲突

        商量

    2.i的问题

for(var i=0;i<arr.length;i++){

      (function(index){

          直接用index代替i

      })(i);

}

        a)循环里面用事件，事件里面用i,i变成长度而不是对应的i的值 0 1 2

        b)循环里面加定时器，定时器里面用i

    左边小括号里面用的是匿名函数的定义，右边的小括号是函数的调用

    (function(){ })();

---

json={};

    JSON.stringify(json)   -> 普通json变成标准json版字符串

    JSON.parse(str) ->  把字符串变成json

    兼容：IE8+ chrome FF

        后台返回的是‘{}‘字符串的json

eval:把字符串变成可以执行JS代码，把结果放过去

eval解析json必须加括号;不然会报错

var str1=‘({"name":"shiyou","age":20})‘;

    alert(eval(str1).name); ==>shiyou

    ////////

    var str2=‘{"name":"shiyou","age":20}‘;

    //直接eval一个‘json‘会报错(Uncaught SyntaxError: Unexpected token :)

    //必须eval 的时候加上小括号

    alert(eval(‘(‘+str2+‘)‘).age);

 

var json={a:5,b:5,c:5};

delete json.a;可以移除a和它的值

它值兼容ie9以上的浏览器

---

<select></select>

先创建 ，后添加

var opt = new Option(‘text‘，‘value‘);    //创建选项

oS.options.add(opt)                             //添加

oS.options.remove(下表||opt);           //删除

 

selectedIndex 获取选中的那个项 下标

oS.options[oS.options.selectedIndex].value/text

 

注意1：<option value="北京">北京</option>一定要加value  

注意2：事件oS.onchange=function(){};

---

对象引用：

     1、基本数字类型：number,string,undefined,boolean

          赋值就是复制；

          var a = 12;

       var b =a ;

       b=b+2;

       a的值还是不变

     2、对象引用

          1）赋值不会复制，对象比较不相等，看起来一样也不行

     var oDate1=new Date();

     var oDate2=new Date();

     oDate1 !==oDate2

     

          2）一个东西改变，另外一个东西也跟着改变

          案例1：

          var a = [12,5,8]; //对象

    var b =a;

    b.pop();

    alert(a);

    给b赋值了a对象，a,b同时指向了同一个对象

     当一个改变了，对象就会发生改变；

案例2：

     var oDate = new Date();

    var oDate2 = oDate;

    oDate2.setFullYear(2020);

    alert(oDate)

---

‘use strict‘严格模式

解决的问题

1.变量必须加var

2.不允许 if 里面定义函数，必须顶层定义

3.严格模式干掉了with

 

严格模式特性

1.必须写use strict 不能是其它单词 否则不起作用

2.use strict 有作用范围 只针对当前函数起作用

3.只针对 当前自己 script标签起作用

4.只针对当前js文件起作用

---

各种表达式：

     1.逗号表达式：优先级特别低用（）括起，读取后面的

          var a = (12,5);

         alert(a);//5

     ————————

     同样读取最后一个，走else

           if(undefined,true,false,32,0){

        alert(‘ok‘);

    }else{

        alert(‘不ok‘);   

    }

 

     2.||：比较懒，碰到真的就返回

     var a=0||5;

     alert(a);结果5

 

     3.&&：比较勤快，得查完，有一个假就都是假的

---

DOM     增，删，改，查

oUl.children         获取UL的子节点         有length的属性

oUl.children[0]    获取UL第1个子节点     使用比较多

oUl.children[oUl.children.length-1]    获取Ul的最后一个子节点    使用比较多

 

oUl.parentNode    获取Ul的父节点    body,HTML,document

 

oUl.firstElementChild||oUl.firstChild    首个节点（first）    "firstChild 低版本IE6 -8

firstElementChild 高级浏览器"

oUl.lastElementChild||oUl.lastChild    最后一个字节点    同上

 

oLi.previousElementSibling||oLi.previousSibling    获取上一个兄弟节点    相对自己

以上是关于前端学习笔记—使用JS修改样式的主要内容，如果未能解决你的问题，请参考以下文章

前端学习：CSS

前端基础复习

前端基础复习

前端开发笔记js基础

ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

前端开发，学习哪些技术呢？