动态创建div样式，遇到麻烦，求大神帮忙解决下

wudichaoren2011 2015-10-01 11:25:59





<script>

function includeStyleElement(styles,styleId) {

if (document.getElementById(styleId)) {

return

}

var style = document.createElement("style");

style.id = styleId;

//为ie设置属性

/*if (isIE()) {

style.type = "text/css";

style.media = "screen"

}*/

(document.getElementsByTagName("head")[0] || document.body).appendChild(style);

if (style.styleSheet) { //for ie

style.styleSheet.cssText = styles;

} else {//for w3c

style.appendChild(document.createTextNode(styles));

}

}

var styles = "#div{background-color: #FF3300; color:#FFFFFF }";

includeStyleElement(styles,"newstyle");

</script>

style.id = styleId;这句话的 style与id中间的 . 是干什么用的？不明白这个点有什么作用

怎么用js创建<script type="text/javascript"></script>这样的语句？

想增加id为my的div样式，怎么实现？

...全文

140 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

wudichaoren2011 2015-10-09

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

</style>









</head>

<body>


<script>
function includeStyleElement(styles,styleId)
{
	if (document.getElementById(styleId))
	{
		return
	}
	var style = document.createElement("style");
	style.id = styleId;

	(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
	
	if(style.styleSheet)
	{ //for ie
		style.styleSheet.cssText = styles;
	}
	else
	{//for w3c
		style.appendChild(document.createTextNode(styles));
	}
}
var styles = "#my{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");
</script>


<div id="my" >



成功


</div>


</body>
</html>

天际的海浪 2015-10-03

打赏
举报

引用 4 楼 wudichaoren2011 的回复:

[quote=引用 3 楼 xiaofanku 的回复:] 想增加id为my的div样式，怎么实现？ re: 最好不要用js为某个元素动态添加样式。因为动态添加的元素也可以绑定已有的css定义


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

</style>









</head>

<body>


<script>
function includeStyleElement(styles,styleId)
{
	if (document.getElementById(styleId))
	{
		return
	}
	var style = document.createElement("style");
	style.id = styleId;

	(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
	
	if(style.styleSheet)
	{ //for ie
		style.styleSheet.cssText = styles;
	}
	else
	{//for w3c
		style.appendChild(document.createTextNode(styles));
	}
}
var styles = "#my{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");
</script>


<div id="my" >


</div>


</body>
</html>

能不能帮忙看看这段代码为什么错了？[/quote] 代码没有错误。只是你的div中没有内容，效果看不到而已

wudichaoren2011 2015-10-03

打赏
举报

求帮忙看下

街头小贩 2015-10-02

打赏
举报

想增加id为my的div样式，怎么实现？ re: 最好不要用js为某个元素动态添加样式。因为动态添加的元素也可以绑定已有的css定义

街头小贩 2015-10-02

打赏
举报

style.id = styleId;这句话的 style与id中间的 . 是干什么用的？不明白这个点有什么作用 re: 对象.属性=值怎么用js创建<script type="text/javascript"></script>这样的语句？ re: 动态加载js的写法



    var oHead = document.getElementsByTagName('HEAD').item(0); 

    var oScript= document.createElement("script"); 

    oScript.type = "text/javascript"; 

    oScript.src="test.js"; 

    oHead.appendChild( oScript);

wudichaoren2011 2015-10-02

打赏
举报

引用 3 楼 xiaofanku 的回复:

想增加id为my的div样式，怎么实现？ re: 最好不要用js为某个元素动态添加样式。因为动态添加的元素也可以绑定已有的css定义


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

</style>









</head>

<body>


<script>
function includeStyleElement(styles,styleId)
{
	if (document.getElementById(styleId))
	{
		return
	}
	var style = document.createElement("style");
	style.id = styleId;

	(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
	
	if(style.styleSheet)
	{ //for ie
		style.styleSheet.cssText = styles;
	}
	else
	{//for w3c
		style.appendChild(document.createTextNode(styles));
	}
}
var styles = "#my{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");
</script>


<div id="my" >


</div>


</body>
</html>

能不能帮忙看看这段代码为什么错了？

wudichaoren2011 2015-10-01

打赏
举报



<script>
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("/css/reset.cssv=20140222"
</script>