js修改元素样式

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

JS修改样式的九种方式

1.直接设置style的属性

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

  • 语法： = 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');

        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>styleElement<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            styleElement <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;style&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            styleElement<span class="token punctuation">.</span>type <span class="token operator">&#61;</span> <span class="token string">&#39;text/css&#39;</span><span class="token punctuation">;</span>
            styleElement<span class="token punctuation">.</span>id <span class="token operator">&#61;</span> <span class="token string">&#39;styles_js&#39;</span><span class="token punctuation">;</span>
            document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&#39;head&#39;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleElement<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        
        styleElement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>newStyle<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">addNewStyle</span><span class="token punctuation">(</span><span class="token string">&#39;.box {height: 100px !important;}&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

    <span class="token comment">// 或者插入新样式时操作</span>
    <span class="token keyword">var</span> styleEl <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;style&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        styleSheet <span class="token operator">&#61;</span> styleEl<span class="token punctuation">.</span>sheet<span class="token punctuation">;</span>

    styleSheet<span class="token punctuation">.</span><span class="token function">addRule</span><span class="token punctuation">(</span><span class="token string">&#39;.box&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;height: 100px&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    styleSheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">&#39;.box {height: 100px}&#39;</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleEl<span class="token punctuation">)</span><span class="token punctuation">;</span>

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常用于实现如下功能：
|–控制文档的外观和内容；
|–对浏览器的控制；
|–与 HTML 表单的交互；
|–与用户的交互；
|–执行计算等。

1.单击事件：定义在按钮的开始标签中
语法：οnclick="js语句"
弹出警告：alert(‘字符串’)
强调：1.js区分大小写
2.字符串单双引号不区分

[removed]标签：页面中专门集中编写JavaScript的区域
js的方法定义：function方法名([参数列表]){
方法体
[return 返回值]
}
注意：js中的方法可以直接写在代码中，不需要“类”包裹
使用方法：方法名()–>方法调用–>立即执行

2.js文件：网页外专门保存js脚本的文件–推荐
强调：HTML、CSS、JS都要使用UTF-8编码保存(window系统)
使用js文件引入网页：[removed][removed]
强调：一旦定义src属性则其中的代码失效
解释执行：语句也可以直接写在js文件中，边解释边执行

3.调试
|–①.只有在执行时，才会报错
|–②.错误信息，浏览器页面看不到–没效果
| 解决：控制台–（工具–>JavaScript控制台或F12）
| 包含错误信息；指向错误位置的超链接
|–③.打桩：在指定变量位置输出变量或对象的内容
(内容);–>出现在控制台–>日志

4.变量：js中的变量不需要提前指定类型，由赋值时动态决定
所有的变量都用var声明

5.数据类型：
|–String(字符串类型)
|–Number(数字类型)
|–Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true

6.数据类型的隐式转换：
|–数字 + 字符串：数字转换为字符串
|–数字 + 布尔值：true转换为1，false转换为0
|–字符串 + 布尔值：布尔值转换为字符串true或false
|–布尔值 + 布尔值：布尔值转换为数值1或0

7.数据类型转换函数 ：(方法前不需要对象调用的：全局函数)
|–toString()：转换成字符串。所有数据类型均可转换为 string 类型；
|–parseInt()：强制转换成整数。如果不能转换，则返回 NaN（not a number）；
|–parseFloat()：强制转换成浮点数。如果不能转换，则返回 NaN(Not a Number)
|–typeof()：查询数值当前类型。
|–isNaN()：判断是否为数字。返回 true：不是数字/false：是数字
| |–isNan(""):对空字符串不验证，直接返回false
| |–如果输入的是字符串类型的数字，返回false–不能判断数据类型，只判断内容
| |–如果输入的是boolean，返回false。因为boolean可以和number类型直接做计算
| |–和任何数字计算都得NaN;和任何数字作比较都得false
|–注：removed;节点输出，即在当前位置输出括号里的内容
*凡是从页面上进入js的都是字符串类型

8.查找元素：抓住根节点，就等于抓住整棵树
网页的根节点：document对象
要找元素，必须利用document对象（当前网页文件）
精确查找某个ID的元素：(id名)；

和undefined：
|–null：一个特殊的值，表示“无值”–空对象。数据类型为Object
|–undefined：表示声明了变量但从未赋值或者对象属性不存在

10.双等号（）和全等号（=）：
|–“”为确定两个运算数是否相等，“”运算符会进行类型转换。转换后运算数相等就返回true，否则返回false
|–“===”不执行类型转换，即，只有在无需类型转换运算数就相等的情况下，才返回true，否则返回false
|–附：if(null)、if(defined)、if(NaN)都相当于if(false)

-----猜数字游戏-----
失去焦点时，判断猜对猜错
获得焦点：onfocus 失去焦点：onblur
当事件就发生在获得内容的当前元素上：
this直接获得当前内容对象。可以代替当前对象完成一切操作，拥有当前对象的所有属性
前端优化：js中最好用三目运算代替if else

：
|–查找：(‘关键字’[，开始位置下标])
| 每次只查找第一次出现的位置
|–替换：(‘关键字’[,‘替换内容’])–不会修改原x字符串
| 每次只替换第一次找到的
|–查找和替换所有：while循环
|
|–String 对象的常用方法有：
|–()、()：大小写转换方法；
|–(index)：返回指定位置的字符；
|–(index)：返回指定位置字符的Unicode编码；
|–(findstr,index)、(findstr,index)： 获取指定字符；
|–(start, end)： 获取子字符串；
|–(findstr,tostr)：替换子字符串；
|–(bystr)： 拆分子字符串。

|--String与正则表达式
      |--(regExp);--查找str中匹配正则表达式的关键字
      |                      返回：如果没找到，返回null。若找到，返回1个数组，数组的每个元素是每个找到的匹配关键                       |          |--(regExp,&quot;替换值&quot;)--替换str中所有匹配的关键字
      |   强调：replace方法不改变元字符串，只能返回新字符串。必须用变量接收新字符串
      |
      |--<em>js</em>中正则表达式语法：/正则表达式/[属性后缀]--其中属性后缀，g：全局匹配 i：忽略大小写(仅英文有效)
                           如果不适用模式匹配方式，将执行原文匹配
                           结果：如果正则表达式写错，也将执行原文匹配

笔试题：js中数组声明方式：
A new Array(7)
B new Array(7，‘a’，true)
C [7，'a',true]–js中所有[]都表示数组
D []–实例化一个空数组对象 实例化空数组：var arr=[];
特点：元素个数不限定，元素类型不限制

对象的常用方法：
|–()方法–用于把数组中的所有元素放入一个字符串 　
| eparato表示要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
|–()方法–可把数组转换为字符串，并返回结果
|–()方法–用于连接两个或多个数组，该方法不会改变现有的数组
|–()方法–截取元素。根据给定的范围可从已有的数组中返回选定的元素

：js中一切都是对象，连方法都是1个对象！！
笔试题：js中方法定义集中方式：
A：function compare(a,b){return a-b;}—可以任意地方声明方法
B：var compare=function(a,b){return a-b;} —|
–其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |–必须在传递之前声明方法对象
C：var compare=new Function('a','b','return a-b') —|
–其实js底层就是new Function;构造函数中的参数都是字符串
结论：所有的方法都是function类型的。

15.JavaScript中的所有事物都是对象，分为三类：
|–简单对象：String、Number、Boolean
|–组合对象：Array、Math、Date
|–复杂对象：Function、Regex、Object等

排序：
|–升序：function compare(a,b){return a-b;}
|–降序：function compare(a,b){return b-a;}
比较器用法：(比较器方法名);
遍历：for(var i=0;i<;i++)–等同Java
Array倒转：();用于颠倒数组中元素的顺序

元素操作：
|–(x);向数组增加1个新元素x（位于数组最后位置）
|–(开始位置，删除几个[,x1,x2,x3…])
|–(x) 返回x在数组中的下标—经常用于判断元素是否存在。如返回-1，x则不在数组中

对象：
|–(num):可把Number四舍五入为指定小数位数(num:0-20)的数字
|–():用于把一个 Number 对象转换为一个字符串，并返回结果

19.正则表达式对象:(专门用于查找和验证)
(‘要验证的完整字符串’)匹配返回true，否则返回false
强调：如果正则表达式使用了^和$，必须完整匹配才行。反之则部分匹配

对象：（计算方法：先get，再计算，最后set回去）
|–1.每个分量上都有一对get/set方法
|–2.命名：get|set年月日，单数；get|set时分秒，复数（s）
|–3.除了日期从1开始到31结束外，其余都从0开始到-1结束
|–Date对象的常用方法
|–1.获取日期数据 getDate()、getDay()、getFullYear()等
|–2.修改日期数据 setDate()、setDay()、setFullYear()等
|–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等

参数：所有方法都隐藏的一个数组对象
作用：不设置任何的形参的情况下，自动接收所有传入参数
：获得参数个数
arguments[i]：获得每个参数–都要判断和类型转换

22.全局函数：不用任何对象点(.)就可以调用–可用于所有的 JavaScript 对象
常用的全局函数有：parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。
encodeURI和decodeURI：
|–encodeURI：可把字符串作为 URI 进行编码
|–decodeURI：decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码

eval() 函数可计算某个字符串，并执行其中的的JavaScript代码

:操作浏览器窗口的对象模型。
–即浏览器对象模型 ，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话”

DOM：操作网页中元素对象的对象模型–即文档对象模型，用来操作文档

window对象的常用属性：
|–document：窗口中显示的 HTML 文档对象
|–history：本次浏览过窗口的历史记录
| --前进：(1);后退：(-1);刷新：(0);
|–location：窗口文件地址对象（地址栏）
|–event：事件对象
|–screen：屏幕对象
|–name：窗口名称
|–opener：打开当前窗口的 window 对象
|–navigator：有关浏览器的信息
|–cookieEnable：判断当前浏览器是否启用cookie
|–userAgent:获得浏览器的名称和版本号

window 对象的常用方法有：
|–alert();–警告框–只能点确认
|–confirm();确认框–可以选择确认或取消
|–prompt();对话框–用于显示可提示用户进行输入
|–('url'[,'name'])：打开1个选项卡
|–()：关闭当前选项卡

24.定时器：凡是网页中自动动态的效果都是用计时器实现的
|–周期性定时器：每隔一个时间段自动执行一次，循环执行
| |–setInterval() 启动–>用于启动一个周期性定时器
| 语法：timer=setInterval(方法名，间隔毫秒数)
|–clearInterval() 停止–>用于停止一个周期性定时器
语法：timer=clearInterval(timer)
|–1次性定时器：先等待一段时间，再自动执行一次，自动结束
|–setTimeout() 启动–>用于启动一个一次性定时器
|–clearTimeout() 停止–>用于停止一个一次性定时器
附：
|–表单控件，读写内容：.value
|–普通html元素，要想读写开始标签和结束标签之间的内容：[removed]

计时器：1.做什么事：方法；
2.一个变量：存计时器的线程号
3.何时启动计时器：事件

：1.代表当前网页文档；
2.所有网页元素的根元素；
3.查找和操作元素，都要依靠document；

节点：nodeName–标签名或属性名

DOM操作样式：对象.className属性
等效于<标签class="">

DOM树：当前节点向上：txtObj[removed]（）
向下：（）

26.表单中查找控件对象：('name属性')

DOM增加新节点：两种方法
创建新节点：('标签名')
–此时新元素对象仅在内存中游离，页面看不见！
添加新节点：找到父元素！
|–appendChild() 方法只能将新节点作为某节点的最后一个子节点
| --此时新元素追加到了父元素的末尾
|–()(新元素对象，A)–其中A为新元素要插入位置的后一位元素

DOM删除元素：(childNode)–node为父节点，childNode为要删除的节点

DOM

Select和Option对象：
select对象：代表HTML表单中的一个下拉列表，每个<select> 标签即表示一个 Select 对象
|–属性：
|–options：返回包含<select>元素中所有<option>的一个数组，每个元素对应一个<option>标签，索引从0开始
|–selectedIndex：设置或返回下拉列表中被选选项的索引号
|–size：设置或返回下拉列表中一次显示显示的选项数
|–方法：
|–add(option)：用于向<select>添加一个<option>元素。
|–remove(index)：从下拉列表删除选项

    Select对象有事件onChange当改变选择时调用的事件句柄。Select对象的onChange属性引用了一个事件句柄函数。当用户选
    中一个选项，或者取消了对一个选项的选定时，就会调用该句柄。这个事件不会指定新的选项是什么，必须通过Select对象的        selectedIndex属性，或者各个Option对象的selected属性来确定这一点。        
 
    option对象：代表HTML表单中下拉列表中的一个选项，每个&lt;option&gt;标签表示一个Option对象
       |--创建：var o = new Option(text,value);
       |--属性：
           |--index：返回下拉列表中选项的索引位置
           |--text：<em>设置</em>或返回选项的文本值；
           |--value：<em>设置</em>或返回选项的值；
           |--selected：<em>设置</em>或返回选项的 selected 属性的值，该属性<em>设置</em>选项的当前状态，如果为 true，则该选项被选中

对象：
rows数组：表中所有行对象
方法：var row=(i);–返回刚添加的新行
(i); --i：行的下标。如果i取-1，即在表格末尾追加一行

tableRow对象：
cells数组：当前行中所有单元格的对象
方法：var 刚添加的新单元格=(i);
(i);
tableCell对象：取单元格内容–td[removed]

29.事件冒泡：
|–1.由外向内，捕获事件：记录哪级元素有什么事件
|–2.由内向外，冒泡执行：按记录的顺序由内向外执行

取消冒泡：
|–1.获得事件对象！–event
οnclick="func(event)"–其中event和this都是关键字，表示事件对象
func(e)–此时e就是事件对象
|–2.取消冒泡：=true;

何时用：如果大量子元素拥有相同事件，应将相同事件统一定义在1个父元素上1次即可


相关文章