JS修改css样式style浅谈
字体：[ ] 类型：转载 时间：
分为改变直接样式，改变className和改变cssText三种，需要的朋友可以参考下
一、局部改变样式 分为改变直接样式，改变className和改变cssText三种。需要注意的是： 注意大小写： javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。 调用方法： 如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像document.getElementById('obj').style.className=”…”的写法是错误的！只能写成：document.getElementById('obj').className=”…” 改变cssText 但是如果用cssText的话，必须加上style，正确的写法是：document.getElementById('obj').style.cssText=”…” 改变直接样式我就不必说了，大家记得要写到具体样式即可，如 document.getElementById('obj').style.backgroundColor=”#003366″ 二、全局改变样式 通常情况下，我们可以通过改变外链样式的的href的值实现网页样式的实时切换，也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id，如 &link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /& 调用时很简单，如 &span on click="javascript:document.getElementById('css').href = 'ie.css'"&点我改变样式&/span& 对于新人往往不知道CSS具体样式在javascript怎么写，而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat，在FIREFOX中写成cssFloat，这就需要大家的积累了。在google中搜索“ccvita javascript”，也许会对你的疑惑有所帮助。 基础知识 通常在网页中样式表的调用方法有三种。 第一种：链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
代码如下: &head& &title&文档标题&/title& &link rel=stylesheet href="http://www.jb51.net/demo.css" type="text/css"& &/link& &/head&
而在XML中，你应该如下例所示在声明区中加入： & ? xml-stylesheet type="text/css" href="http://www.jb51.net/dhtmlet.css" ?& 第二种：定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的和标记之间插入一个 块对象。 定义方式请参阅样式表语法。示例如下：
代码如下: &html& &head& &title&文档标题&/title& &style type="text/css"& &!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: color: blue} p {font: 10pt/12pt "Arial"; color: black} --& &/style& &/head& &body& &/body&&/html&
请注意，这里将style对象的type属性设置为”text/css”，是允许不支持这类型的浏览器忽略样式表单。 第三种：内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： &p style="margin-left: 0.5 margin-right:0.5in"&这一行被增加了左右的外补丁&/p&&p& &/p&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js控制不同的时间段显示不同的css样式的实例代码
字体：[ ] 类型：转载 时间：
这篇文章介绍了js控制不同的时间段显示不同的css样式的实例代码，有需要的朋友可以参考一下
js函数，可以放到单独的js文件中也可以放到当前页的&head&标记之内
代码如下:function getCSS(){&&&&&&& datetoday = new Date();&&&&&&& timenow=datetoday.getTime();&&&&&&& datetoday.setTime(timenow);&&&&&&& thehour = datetoday.getHours();&&&&&&& if (thehour&12)&&&&&&&&&&& display = "1.css";&&&&&&& else if (thehour&12)&&&&&&&&&&& //样式表的名称，或者你可以加上路径&&&&&&&&&&& display = "1.css";&&&&&&& else&&&&&&&&&&& display = "2.css";&&&&&&& //（...想要更多再加即可...）&&&&&&& var css = '&';&&&&&&& css+='link rel="stylesheet" href='+display+' \/';&&&&&&& css+='&';&&&&&&& document.write(css);}
应用该样式表的HTML文件
代码如下:&html&&head&&title&在不同的时间显示不同的提示信息&/title&&script type="text/javascript" src="dacss.js"&&/script&&/head&&body&&script type="text/javascript"&window.onload=getCSS();&/script&
js控制不同的时间段显示不同的css样式&/body&&/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
JS+CSS实现仿msn风格选项卡效果代码
本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码。分享给大家供大家参考，具体如下：
这是一款来自MSN网站的选项卡，清新淡蓝色风格，新闻类、资讯类、文章类网站都比较适合使用，代码扩展性高，W3C标准设计，兼容IE、火狐等多种浏览器，整体效果非常不错。
运行效果截图如下：
具体代码如下：
&!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"&
&title&msn 选项卡&/title&
&style type="text/css"&
body {text-align:color:#666;font-size:12font-family:tahoma,arial,sans-}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
li{list-style:}
a img{border:}
a:link{text-decoration:color:#07519A;}
a:visited{text-decoration:color:#07519A;}
a:active,a:hover{text-decoration:color:#07519A;}
.tarea0{float:height:220width:242}
.tarea{border:1px solid #float:height:156text-align:width:242}
.tarea1{border:1px solid #float:height:251text-align:width:242}
.tarea2{border:1px solid #float:height:217text-align:width:243}
ul.tbtn li{background:#EBF3FB;border:1px solid #border-left:border-top:color:#07519A;cursor:display:float:height:25line-height:25text-align:text-decoration:width:60background:url(images/msfp_015.gif) repeat-x;}
ul.tbtn li:hover{text-decoration:}
ul.tbtn li.curr{background:#border-bottom-color:#cursor:color:#666;}
.tbcon{margin:8px 0px 6px 8text-align:padding:8}
&script language="javascript" type="text/javascript"&
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.
for(i=0;i&tabNi++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
&div class="tarea2" style="height:223"&
&ul class="tbtn"&
&li onclick="tabit(this)" id="tabap1_btn_0" class="curr"&最新上传&/li&
&li onclick="tabit(this)" id="tabap1_btn_1"&分类导航&/li&
&li onclick="tabit(this)" id="tabap1_btn_2"&网页特效&/li&
&li style="border-right:" onclick="tabit(this)" id="tabap1_btn_3"&浏览排行&/li&
&div class="clr"&&/div&
&div class="tbcon" id="tabap1_div_0"&这里是最新上传的内容&/div&
&div style="display:" class="tbcon" id="tabap1_div_1"&这里是分类导航&/div&
&div style="display:" class="tbcon" id="tabap1_div_2"&网页特效的内容&/div&
&div style="display:" class="tbcon" id="tabap1_div_3"&浏览排行&/div&
希望本文所述对大家JavaScript程序设计有所帮助。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]前端是否应该将CSS和JS分开设置两个不同岗位 - 文章 - 伯乐在线
& 前端是否应该将CSS和JS分开设置两个不同岗位
& 来源： &&&&
这事从Franky的一则招聘说起。昨天Franky发了一则招聘前端的微博，招聘条件写得比较实在，不是那种一看就是从别的地方复制过来的那种：
招聘条件写得看似很低，所以一下子引起了很多关注，微博和QQ群里很多人在讨论。关于这则招聘，我也有些话想说。
在新浪和腾讯，前端都是分 CSS 方向和 JS 方向的。在淘宝和百度是不分的。不同的公司岗位设置不同，都有各自的道理。
我在淘宝时觉得 CSS 和 JS 应该一个人来做，因为这两样是紧密合作的， CSS 如何设置和 JS 是关联很大的，这个分开两个人做，在对接的时候一定有很多隐患。当时我认为设置 CSS 工程师这个岗位，是因为合格的前端（既精 CSS 又精 JS ）很少，但市场需求大，所以拉了些只会 CSS 的工程师回来设一个 CSS 工程师的职位来凑数，其实是为了起一个过渡作用，等到合格的前端多起来的时候，这些 CSS 工程师岗位一定会给撤掉的。但当时我在淘宝大部分时间都在做一些毫无技术含量的专题页，一两个小时出一个页面的那种，占了我工作时间80%以上，其实对我本人来说很痛苦，没什么可提高的。
后来去了新浪，我是专职做 JS ，不用切页面的，后来我发现 CSS 和 JS 分开来其实比我想像中隐患小很得多——如果 CSS 工程师靠谱的话（事实上 CSS 工程师们也在学一些 JS ，大部分人都会借助jQuery自己完成一些功能，所以其实他们对 JS 和 CSS 如何协同工作是了解的）。我在新浪时，和 CSS 工程师配合得很好，很多问题其实事先说明一下我的思路， CSS 工程师们一点就透。我个人可以有更多的时间关注一些别的东西，以自我提升。在新浪时，无论从工作量上，还是从专注程度上，都比之前我 CSS 、 JS 全包时要好上很多。有非常多的知识是我在新浪工作期间学会的，比如ror、python和敏捷。在老东家灰头土脸迎接一个又一个专题页时，我完全不可能在短时间内学习到这么多知识点。而专门设置一个 CSS 工程师的岗位，公司招人也会容易得多，而且无论是 JS 还是 CSS 工程师，因为分开来工作，所以每个人其实都保持了一个很高的工作效率，不用不停地切换思维模式。在薪水方面， CSS 工程师比 JS 工程师薪水普遍要低一些，事实上这个大家其实都能理解，无论 CSS 工程师们是否愿意承认， JS 的确比 CSS 门槛高，也更有供挖掘的深度。所以 CSS 工程师们也会想要转型做 JS ，往往是以 CSS 入行，再慢慢转型做 JS 。老实说，我觉得有这样一个梯度，无论对公司招聘，还是工程师们的发展，都是非常有利的。
我现在个人非常赞成将两者分开的做法。就像Franky说的“只不过我的原则就是:绝对不搞那种，招御厨的标准，费劲半年，招来一个御厨，结果让人家整天削土豆皮。虽然这个说法有点攻击重构这个工作，但是还是有那么几分道理在”。
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线