通过Js来设置页面样式

介绍

我们可以在编辑HTML源码的时候将CSS样式写死到.css文件或者HTML元素的style属性中，但又时候可能会需要动态地来修改某个元素的样式。我这里介绍两种方式：修改HTML元素的style属性、动态加载link节点。如果各位看客还有其他方法的话，不吝赐教，欢迎给点小提示哦。

style属性

在使用各种框架之前，必须要知道原生的Js到底是怎么写的。这里最直接的办法就是： document.getElementById('content').style = 'margin-left:0px;position:absolute;'; 上面的代码给id为content的元素添加了两个CSS样式，都是key-value的形式，以分号（;)分割。这样的代码在Firefox浏览器中是没问题的，但可能在IE和Chrome中无效，下面介绍另一种方法： var content = document.getElementById('content'); content.style.marginLeft = '0px'; content.style.position = 'absolute'; 可以看到这种办法要稍微麻烦点，但没关系，如果内容很多的话我们依然是可以使用循环来搞定（谁让我们程序员都是懒人呢）。另外，要注意的是，这里的CSS属性名和直接在.css文件中的写法稍微有点不同，例如：.css文件中的margin-left在这里就需要写成marginLeft，取消中划线（-)，用大写字母来代替。

link节点

我们知道，在HTML中每个元素都是可以有class属性来设置样式的，这种样式是从.css文件中加载的。如果我们想要修改的效果是这种比较全局性的样式的话，上面的办法可能就不太试用了。解铃还须系铃人嘛，.css文件的问题就让她自己来解决吧。和js文件一样，除了写死在源代码中静态加载之外还是可以根据实际需要来动态加载的（哈，这有点像Java中的反射或者C语言中神奇的指针吧）。要想实现这样的效果，当然是需要在HTML中动态添加一个link节点了： var page_div = document.getElementById('page'); var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'test.css'; page_div.appendChild(link); 至于test.css文件的内容，自己随便写喽。

参考

这里有另外一篇文章，介绍如何通过Js来修改页面元素。 http://www.w3school.com.cn/jsref/dom_obj_style.asp

转载于:https://my.oschina.net/surenpi/blog/816818

通过Js来设置页面样式相关推荐

js 设置html标签样式表,js怎么设置css样式？
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...
JS如何设置CSS样式？
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值 ...
JS怎么设置CSS样式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有"-"号,就写成驼峰的形式(如textAl ...
实现js动态设置css样式，js动态设置全局样式主题色
需求: 1.设置一个全局的样式 2. 样式是需要动态改变的,改变的内容是通过请求后台接口获取的,因此需要js能够对css进行改变实现: 或许你可能不相信,代码只需要几行 js代码: // 设置主题色 ...
Js中设置css样式
本次介绍了3种修改css样式的方法,下面分别介绍 css代码 <style>div{width: 100px;height: 100px;background-color: pink;}. ...
JS 动态设置页面高度
JavaScript获取页面.屏幕尺寸大小参数 //网页可见区域宽 document.body.clientWidth //网页可见区域高 document.body.clientHeight //网 ...
JS动态设置div样式
<script>window.onload=function(){if("index"=="${requestScope.page}"){docum ...
js里设置html样式,JS 动态设置css样式
1.0 内联样式 : 通过行内样式.style 属性来编辑给定的HTMLElement的内联样式 let el = document.createElement('div') ; 01) . el. ...
github打开前端样式丢失_微信小程序入门教程之二：页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...

通过Js来设置页面样式

通过Js来设置页面样式相关推荐

最新文章

热门文章