js加载css样式,html 加载css
如何通过js给css添加样式
选中标签,然后用style设置样式
成都网络公司-成都网站建设公司成都创新互联公司十多年经验成就非凡,专业从事成都做网站、网站建设,成都网页设计,成都网页制作,软文发布平台,1元广告等。十多年来已成功提供全面的成都网站建设方案,打造行业特色的成都网站建设案例,建站热线:028-86922220,我们期待您的来电!
div id="h5course"HTML5学堂(WX号),技术干货文章分享/div
script
var box = document.getElementById('h5course');
box.style.color = '#39f';
box.style.border = '2px solid #000';
/script
js中用cssText设置css样式的简单方法
如果网页中一个
id为“no”的标签,暂且当div标签来tell;
想要在js中设置这个div的css样式,很一般的做法是:
var
obj
=
document.getElementByIdx_x_x('no');
obj.style.width
=
'400px';
obj.style.height
=
'300px';
如果要设置一堆又一堆的css样式呢,太麻烦了把、
一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create一个元素,难道还想这样简单点?那就要想别的办法了~
于是大家就写了一个又一个的函数,经典的两个是:
var
obj
=
document.getElementByIdx_x_x('no');
function
setStyle(obj,
css)
{
for(var
attr
in
obj){
obj.style[attr]
=
css[attr];
}
}
setStyle(obj,{width:"400px",height:"300px"});
当然还有更简单的,cssText:
var
obj
=
document.getElementByIdx_x_x('no');
obj.style.cssText
=
"width:400px;
height:300px;";
当然这种方法对于create的元素初始化css样式来说很简单很方便。
以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~
如何实现JavaScript动态加载CSS和JS文件
动态加载外部css样式及css样式,参考代码如下:
// 动态加载外部js文件
var flag = true;
if( flag ){
loadScript( "js/index.js" );
};
function loadScript( url ){
var script = document.createElement( "script" );
script.type = "type/javascipt";
script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载js
if( flag ){
var script = document.createElement( "script" );
script.type = "text/javascript";
script.text = " ";
document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载外部css样式
if( flag ){
loadCss( "css/base.css" );
};
function loadCss( url ){
var link = document.createElement( "link" );
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName( "head" )[0].appendChild( link );
};
// 动态加载css样式
if( flag ){
var style = document.createElement( "style" );
style.type = "text/css";
document.getElementsByTagName( "head" )[0].appendChild( style );
var sheet = document.styleSheets[0];
insertRules( sheet,"#gaga1","background:#f00",0 );
};
function insertRules( sheet,selectorTxt,cssTxt,position ){
if( sheet.insertRule ){ // 判断非IE浏览器
sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position );
}else if( sheet.addRule ){ //判断是否是IE浏览器
sheet.addRule( selectorTxt ,cssTxt ,position )
}
}
如何用JS修改已加载的CSS样式表样式?
js是无法直接修改css文件的,但可以通过取对象的方式修改对象的样式,通常有两种方法:
1、改变className,但首先在样式表中预设定样式类。
例如:document.getElementById('obj').className='...';
2、改变cssText。
例如:document.getElementById('obj').style.height='100px';
怎么在js中给文本框添加CSS样式
在页面内用JS操作CSS除非用AJAX,但操作页面内的样式的话,是可以的。操作样式分为改变直接样式,改变className和改变cssText三种
一、局部改变样式
调用方法:
改变className
div id="demo"测试/div
script
document.getElementById('demo').className="test";
/script
改变直接样式
div id="demo"测试/div
script
document.getElementById('obj').style.backgroundColor="#003366";
/script
二、全局改变样式
可以通过改变外链样式的的href的值实现网页样式的实时切换
link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /
span on click="javascript:document.getElementById('css').href = 'ie.css'"点我改变样式/span
文章名称:js加载css样式,html 加载css
当前路径:http://scyanting.com/article/dsdegps.html