使用JavaScript怎么改变css样式

2023-06-14 13:06:03 145人浏览薄情痞子

摘要

这期内容当中小编将会给大家带来有关使用javascript怎么改变CSS样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。js改变css样式的方法：第一种：用cssTextdiv.style.cssTex

这期内容当中小编将会给大家带来有关使用javascript怎么改变CSS样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

js改变css样式的方法：

第一种：用cssText

div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

第二种：用setProperty()

 div.style.setProperty('width','700px'); div.style.setProperty('height','300px'); div.style.setProperty('line-height','300px'); div.style.setProperty('background','#f00'); div.style.setProperty('color','#fff'); div.style.setProperty('border','1px solid blue'); div.style.setProperty('text-align','center');

第三种：使用css属性对应的style属性

 div.style.width = "800px"; div.style.height = "250px";  div.style.lineHeight = "250px";  div.style.background = "#000"; div.style.color = "#fff"; div.style.border = "1px solid #111"; div.style.textAlign = "center";

<body>        <div id="div">这是一个盒子</div>        <script type="text/javascript">            var div = document.getElementById("div");                        //第一种:用cssText            div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';                        //第二种：用setProperty()            div.style.setProperty('width','700px');            div.style.setProperty('height','300px');            div.style.setProperty('line-height','300px');            div.style.setProperty('background','#f00');            div.style.setProperty('color','#fff');            div.style.setProperty('border','1px solid blue');            div.style.setProperty('text-align','center');                        //第三种：使用css属性对应的style属性            div.style.width = "800px";            div.style.height = "250px";             div.style.lineHeight = "250px";             div.style.background = "#000";            div.style.color = "#fff";            div.style.border = "1px solid #111";            div.style.textAlign = "center";        </script>    </body>

上述就是小编为大家分享的使用JavaScript怎么改变css样式了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 使用JavaScript怎么改变css样式

本文链接: https://www.lsjlt.com/news/271202.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

使用JavaScript怎么改变css样式

这期内容当中小编将会给大家带来有关使用JavaScript怎么改变css样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。js改变css样式的方法：第一种：用cssTextdiv.style.cssTex...

99+

2023-06-14
怎么使用CSS改变光标样式

这篇文章主要介绍“怎么使用CSS改变光标样式”，在日常操作中，相信很多人在怎么使用CSS改变光标样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用CSS改变光标样式”的疑惑有所帮助！接下来，请跟着小编...

99+

2023-07-06
react怎么改变css样式

本教程操作环境：Windows10系统、react18版、Dell G3电脑。react怎么改变css样式？？react的两种动态改变css样式的方法第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport React, ...

99+

2023-05-14

css React
react 怎么改变css样式

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。react 怎么改变css样式？react的两种动态改变css样式的方法第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport Rea...

99+

2023-05-14

css React
使用react怎么动态改变css样式

本篇文章为大家展示了使用react怎么动态改变css样式，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。第一种：动态添加class，以点击按钮让文字显示隐藏为demoimport React...

99+

2023-06-14
jq如怎么改变css样式

这篇文章主要介绍jq如怎么改变css样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样...

99+

2023-06-14
JavaScript怎么改变HTML样式

这篇“JavaScript怎么改变HTML样式”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇...

99+

2022-10-19
怎么利用CSS变量修改样式

这篇文章将为大家详细讲解有关怎么利用CSS变量修改样式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。改变div的hover背景色<...

99+

2023-06-08
css怎么改变滚动条样式

这篇文章主要介绍了css怎么改变滚动条样式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css改变滚动条样式的方法：1、通过“-webkit-scrollbar”属性设置滚动...

99+

2023-06-14
jq怎么改变css样式宽度

这篇文章给大家分享的是有关jq怎么改变css样式宽度的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在jquery中，可以使用css()方法改变样式，...

99+

2022-10-19
js怎么改变css样式宽度

这篇文章主要介绍“js怎么改变css样式宽度”，在日常操作中，相信很多人在js怎么改变css样式宽度问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js怎么改变css样式宽度”的疑惑有所帮助！接下来，请跟着小编...

99+

2023-06-20
使用js如何改变css样式

这篇文章主要介绍使用js如何改变css样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！方法：1、使用“对象.style.属性名="值"”；2、使用“对象.style.cssText="...

99+

2023-06-15
使用JavaScript怎么对CSS样式进行修改

这期内容当中小编将会给大家带来有关使用JavaScript怎么对CSS样式进行修改，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。html中的内容：<!DOCTYPE html><...

99+

2023-06-14
javascript怎么改变网页的样式

这篇“javascript怎么改变网页的样式”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“...

99+

2022-10-19
怎么使用jquery修改css样式

这篇“怎么使用jquery修改css样式”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用jquery修改css样式”文...

99+

2023-07-04
javascript怎么改变HTML的内容和样式

这篇文章主要讲解了“javascript怎么改变HTML的内容和样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript怎么改变HTML的内容和样式”吧！JavaScript：...

99+

2023-06-27
不使用hover外部CSS样式怎么实现hover鼠标悬停改变样式

本篇内容介绍了“不使用hover外部CSS样式怎么实现hover鼠标悬停改变样式”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细...

99+

2022-10-19
如何利用vue来改变css样式

这篇文章主要介绍“如何利用vue来改变css样式”，在日常操作中，相信很多人在如何利用vue来改变css样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何利用vue来改变css样式”的疑惑有所帮助！接下来...

99+

2023-06-14
怎么修改css样式

这篇文章将为大家详细讲解有关怎么修改css样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css的三种引入方式1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""...

99+

2023-06-14
怎么使用JavaScript操作元素改变页面内容样式

这篇文章主要介绍“怎么使用JavaScript操作元素改变页面内容样式”，在日常操作中，相信很多人在怎么使用JavaScript操作元素改变页面内容样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用J...

99+

2023-06-21