javascript 动态改变样式

最新推荐文章于 2022-11-22 11:56:02 发布
最新推荐文章于 2022-11-22 11:56:02 发布
阅读量94 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liane/archive/2011/07/16/2108473.html
版权

　　在《深入浅出javascript》中看到这样的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Example: Style Switcher</title>
  	<link href="demoStyles.css" title="Normal" rel="stylesheet" type="text/css">
  	<link href="largePrint.css" title="Large Print" rel="alternate stylesheet" type="text/css">
  	<link href="highContrast.css" title="High Contrast" rel="alternate stylesheet" type="text/css">
  	<script type="text/javascript" src="../DOMhelp.js">
	</script>
  	<script type="text/javascript" src="styleSwitcher.js">
	</script>
</head>
<body>

...

　　忽略body的内容。。通过javascript得到link标签的内容，产生改变样式的菜单

switcher={
	menuID:'styleswitcher',
	chooseLabel:'Choose Style:',
//初始化，生成样式切换菜单。。
	init:function(){
		var tempLI,tempA,styleTitle;
		var stylemenu=document.createElement('ul');
		tempLI=document.createElement('li');
		tempLI.appendChild(document.createTextNode(switcher.chooseLabel));
		stylemenu.appendChild(tempLI);
		stylemenu.id=switcher.menuID;
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			if(links[i].getAttribute('rel')!='stylesheet' && 
			links[i].getAttribute('rel')!='alternate stylesheet'){
				continue;
			}
			tempLI=document.createElement('li');
			tempA=document.createElement('a');
			styleTitle=links[i].getAttribute('title');
			tempA.appendChild(document.createTextNode(styleTitle));
			tempA.setAttribute('href','#');
			tempA.οnclick=function(){
				switcher.setSwitch(this);
			}
			tempLI.appendChild(tempA);
			stylemenu.appendChild(tempLI);
		}		
		document.body.appendChild(stylemenu);
	},
	setSwitch:function(o){
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			var title=o.firstChild.nodeValue;
			if(links[i].getAttribute('title')!=title){
				links[i].disabled=true;
			} else {
//ie下有bug的一段，重复按同样的标签，样式会崩溃
				links[i].setAttribute('rel','stylesheet');
				links[i].disabled=false;
			}
		}			
		return false;
	}
}
DOMhelp.addEvent(window,'load',switcher.init,false);
links[i].setAttribute('rel','stylesheet');在ie下会导致样式崩溃，不知道为何，求大神解答吧。
将样式提前设置
	init:function(){
		var tempLI,tempA,styleTitle;
		var stylemenu=document.createElement('ul');
		tempLI=document.createElement('li');
		tempLI.appendChild(document.createTextNode(switcher.chooseLabel));
		stylemenu.appendChild(tempLI);
		stylemenu.id=switcher.menuID;
		var links=document.getElementsByTagName('link');
		for(var i=0;i<links.length;i++){
			if(links[i].getAttribute('rel')!='stylesheet' && 
			links[i].getAttribute('rel')!='alternate stylesheet'){
				continue;
			}
                        //在初始化时，预设link的rel
			if(links[i].getAttribute('rel')=='alternate stylesheet'){
				links[i].setAttribute('rel','stylesheet');
			}
....

还有个bug，就是在ie下一开始选第二、第三个样式时，样式继续崩溃。
继续研究中。。
求解答~

转载于:https://www.cnblogs.com/liane/archive/2011/07/16/2108473.html

weixin_34004750
关注
javascript动态设置样式style实例分析
10-24
在JavaScript中，动态设置样式style是一种常见的操作，它允许开发者在运行时改变元素的外观。通过修改元素的`style`对象，我们可以直接控制CSS样式。下面我们将详细讨论这个主题，并通过实例来分析其中的易错点和...
jasperreport动态设置样式
kongkong的专栏
09-18 1151
style <style name="Table_font1"> <conditionalStyle> <conditionExpression><![CDATA[$F{FIRSTNAME}.startsWith("La")]]></conditionExpression> <style mode="Opaque" backcolor="#ABABAB" isBold="true"> <box>
七天学会javascript之动态改变样式（39）
weixin_45147894的博客
05-29 143
动态改变元素样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？ 语法: Object.style.property=new style; 注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。 基本属性表（property）: 注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。 看看下面的代码: 改变 <p> 元素的样式，将颜.
通过js动态改变style样式的方法
最新发布
qq_17355709的博客
11-22 2087
2.在全局scss文件中定义全局变量。好了，相信聪明的你，已经看懂了。3.引用变量，改变变量值。
JavaScript实现导航样式动态变化
hhuahuanghao的专栏
03-31 924
<br />在做开发时，遇到“关于我们”页面一个这样的需求，导航样式动态变化   url类似http://rencai.test.com/main.php？module=about#connectus<br /><li><a href="#about" mce_href="#about" id="aboutNav" onclick="changeNavStyle(this.id)">关于<{$sitename}></a></li> <li><a href="#advertise" mce_href
js动态控制导航栏样式
10-28 878
导航栏一般做为母版页，为了使增加用户体验，往往在用户进入某个页面给予导航栏相应的样式，这里可以用js动态添加 <div class="box_left fl"> <dl class="box_Order"> <dt>订单中心</dt> <dd><a href="/user...
JavaScript修改css样式style动态改变元素样式
10-26
我们需要为需要改变的目标元素（如标签）设置一个id，然后通过JavaScript改变该id元素的href属性值，指向另一个CSS文件。例如，当用户点击一个按钮时，可能会触发一个函数，这个函数将会将页面中的样式链接更换为另...
JavaScript动态加载样式表的方法
10-24
除了更换皮肤和主题，动态加载样式表还可以用于其他场景，如在特定条件下改变页面布局、为打印页面加载专门的样式表、实现广告或特定内容的样式覆盖等。 在实际应用动态加载样式表的过程中，还需要注意一些事项： -...
JavaScript动态改变div属性的实现方法
10-23
JavaScript中动态改变div的样式属性可以通过直接操作元素的style对象属性来实现。在本文示例中，通过循环遍历了所有的input元素，并为它们绑定了一个点击事件。在这个点击事件的函数中，首先判断当前input元素是否是...
用JavaScript实现一个简单动态导航条
mddgxz的博客
04-15 4031
虽说是js实现，但是其中是引入了jq，将它们封装成jq对象，所以js中的代码只有两行，代码看起来多是因为写的样式多。 实现的主要功能为：当鼠标放到导航栏上面的链接时，链接下方的链接元素也会显示出来，当移除鼠标时，将收缩上去不显示。 <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0;
导航菜单点击切换时保持高亮状态（JS实现）示例代码navtab11.html
02-25
导航菜单点击切换时保持高亮状态（JS实现）示例代码。尝试每个页面的导航栏目后加class=“active”属性进行修改不成功，这时就需要灵活使用javascript来搞定，主要用到添加类样式addClass()，删除类样式removeClass()，切换类样式toggleClass()等。
javascript+css3 实现动态按钮菜单特效
10-22
主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下
JS实现自动变化的导航菜单效果代码
01-21
本文实例讲述了JS实现自动变化的导航菜单效果代码。分享给大家供大家参考。具体如下： 自动变化的JS导航菜单，按照时间自动切换，有需要的参考一下。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-auto-cha-nav-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=
JS实现选中当前菜单后高亮显示的导航条效果
10-23
主要介绍了JS实现选中当前菜单后高亮显示的导航条效果,涉及JavaScript针对页面元素的遍历及样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
技术干货 ｜ jsAPI 方式下的导航栏的动态化修改
移动开发平台 mPaaS 的博客
10-15 397
操作指导：通过 jsAPI 实现导航栏的动态修改。
用JS控制页面调用不同样式表
恭喜姐姐
02-27 280
前一段时间研究过用JS控制页面浏览器变化时自动调用不同样式的问题，今天在蓝色理想上又看到了类似的代码，特摘抄下来以备后用。   用setAttribute方法实现一个页面两份样式表的效果，具体方法如下： 第一步：在连接样式表的元素里定义一个id,例如 &lt;link href="1.css" rel="stylesheet" type="text/css" id="css"&gt; 我定义的id...
用JavaScript制作导航栏切换
weixin_42442856的博客
12-24 3459
效果图： 先写HTML代码： <div class="tab"> <div class="tab_list"> <ul> <li class="current">国际新闻</li> <li>国内新闻</li> <li>体育新闻</li> .
导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
weixin_42220669的博客
06-07 2036
这里记录下导航栏几种常见的样式，仅供大家参考。导航栏1 (原生 JS 代码)比较常见也比较简单的导航栏 ，用的 JavaScript 原生代码，大致思路是通过改变 li 元素的 className 实现鼠标移动切换 tab 时改变其背景色及文字颜色，同时切换显示 tab 对应内容。nav-1.gif导航栏1-JS原生版* {margin: 0;padding: 0;}body {font: 12p...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值