js 设置html标签样式表,js怎么设置css样式?
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
1、直接设置style对象(内联样式)
使用JavaScript设置元素样式的最简单方法是使用style属性。在我们通过JavaScript访问的每个HTML元素时都有一个 style对象。此对象允许我们指定CSS属性并设置其值。例如,这是设置id 值为demo的HTML元素的字体颜色、背景颜色、的样式:var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';
// 将高度设置为150 px
elem.style.height = '150px';
注:JavaScript使用驼峰原则(例:backgroundColor)而不是短划线(background-color)表示属性名称
该style属性在元素上添加样式内联:
Hello, world!
但是,这可能会使我们的标记变得非常混乱。浏览器渲染的性能也较差。
2、设置style属性--添加全局样式
另一种方法是将里带有CSS属性的元素注入DOM。将在设置应用于一组元素而不仅仅是一个元素的样式时,这非常有用。
首先,我们将创建一个样式元素。var style = document.createElement('style');
接下来,我们将通过innerHTML来给
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
最后,我们将把样式注入DOM。为此,我们将获取script我们在DOM中找到的第一个标记,并用它insertBefore()来添加我们的style标记。// 创建我们的样式表
var style = document.createElement('style');
style.innerHTML =
'.some-element {' +
'color: purple;' +
'background-color: #e5e5e5;' +
'height: 150px;' +
'}';
// 获取第一个脚本标记
var ref = document.querySelector('script');
// 在第一个脚本标签之前插入新样式
ref.parentNode.insertBefore(style, ref);
3、使用JavaScript添加和删除类:add()和remove()
这种方法涉及添加和删除类值,这反过来又会改变应用的样式规则。例如,假设我们有一个样式规则,如下所示:.disableMenu {
display: none;
}
在HTML中,您有一个id为 dropDown的菜单:
123456
现在,如果我们想将.disableMenu 样式规则应用于此元素中,我们需要做的就是将disableMenu作为类值添加到dropDown元素:
OneTwoThreeFourFiveSix
要使用JavaScript完成相同的结果,我们将使用classList API。此API使得从HTML元素添加或删除类值变得非常简单。
要将disableMenu类名添加到我们的dropDown元素,请在HTML元素的classList属性上使用add()方法:var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.add("disableMenu");
要删除disableMenu类名,我们可以调用classList API的remove()方法:var theDropDown = document.querySelector("#dropDown");
theDropDown.classList.remove("disableMenu");
更多CSS相关知识,可访问 CSS教程 !!
以上就是js怎么设置css样式?的详细内容,更多请关注html中文网其它相关文章!
js 设置html标签样式表,js怎么设置css样式?相关推荐
- Vue.js实现简单的按钮点击改变css样式
本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ ̄ 3 ̄)づ 一.效果 二.前端代码 这是静态页面代码部分(就两个简单 ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
- css 设置其它标签,有没有办法将CSS样式设置为特定输入类型的标签?
我为特定表单的标签设置了以下样式: #incidentForm label { font-weight:bold; width:40%; vertical-align:top; } 这正是我想要的整页 ...
- php控制打印机打印设置,专为控制打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...
- css设置1.5倍行高,用css样式设置行高:
代码1: [◇ 一月送你一个吉祥 ◇] [◇ 二月送你一个如意 ◇] [◇ 三月送你一个快乐 ◇] [◇ 四月送你一个欢喜 ◇] [◇ 五月送你一个健康 ◇] [◇ 六月送你一个福气 ◇] [◇ 七月 ...
- [JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
- html5中插入样式表方法,如何插入css样式?
如何插入css样式?下面本篇文章就来给大家介绍一下插入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 准备 1.首先准备一个html文件:test.html,不建议 ...
- php怎么设置段落之间的距离,css如何设置段落间距?margin 属性设置段落间距(代码实例)...
段落间距是网页设计里一个提升文章阅读体验的重要因素.但网页排版不想Word那样简单,而作为网页设计师,为了读者的良好阅读体验,我们必须为文章的每个小标题和段落都预留一定的空间,用css有效率地设置段落 ...
最新文章
- 出租房的网络环境研究
- mysql bypass_Bypass MySQL Safedog
- F. It‘s a bird! No, it‘s a plane! No, it‘s AaParsa!
- RoseHA集群:RHEL+RoseMirror+Oracle【2】
- npm设置http代理
- php %3ch1%3e字体,phpWebSite搜索模块跨站脚本执行漏洞
- mysql索引的创建与管理实验_mysql索引创建与管理笔记
- 什么是分布式查询mysql_基础普及之什么是分布式SQL
- CSITool的安装过程(参照官方教程进行细节处理)
- BP神经网络拟合函数
- tomcat的access日志配置
- 数值计算之第二期:误差分析
- 如何删除部分页的页眉页脚
- 电脑网络连接里多了个计算机,怎么样把几台电脑连接在同一个局域网
- 虚拟空间对新闻媒体的真实挑战
- 【商业画布】魏朱画布
- DQ坐标轴锁相环(pll)
- AcWing 838. 堆排序
- 利用Http实现屏幕监控
- 每天一算法(双色河内塔又叫汉诺塔)