本文目录一览：
- 1、JS或Jquery动态改变导航栏样式
- 2、关于js中利用DOM动态改变CSS样式，请大神提供代码
- 3、建站知识:如何使用JS来自由切换css样式表
- 4、如何实现JS onClick 点击切换效果
- 5、想用JavaScript实现DIV样式切换
- 6、JS 动态修改CSS 样式方法/全局
JS或Jquery动态改变导航栏样式
简单的插件代码如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title动态导航插件/title
style type="text/css"
!--
body, td, th {
font-size: 14px;
background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*导航默认样式，可根据实际情况修改*/
* {
margin:0;
padding:0
}
.nav {
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
}
.nav li {
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /*建议此高度大于等于里面的a标签高度*/
float:left;
}
.nav li span {
display:inline-block;
overflow:hidden
}
.nav li a {
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
}
/*鼠标经过时样式*/
.nav li a.over {
background-color:#666;
color:#FFF
}
--
/style
script type=text/javascript src=""/script
script type="text/javascript"
(function($){
$.fn.dynamicNav=function(options){
//默认配置
var defaults = {
direction:"up", //动画切换方向，总共4种up 、down 、left 、right
duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
};
// 覆盖默认配置
var opts = $.extend(defaults, options);
this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");
//在a标签外侧插入span
navList.wrapInner("span/span");
var span=navLink.parent();
//判断是否垂直切换
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}
//判断是否改变span初始位置及a样式
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}
navLink.each(function(){
//获取a高度和宽度
var w=$(this).outerWidth(),
p=$(this).parent();
//初始复制现有a标签
$(this).clone().appendTo(p).addClass("over");
//如果是垂直切换
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}
});
//如果向右或向下切换，改变span初始位置及a样式
if(restSpan){
span.each(function(){
if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}
if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}
$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}
//鼠标经过时动画函数
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
}
//鼠标移开时动画函数
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
}
//鼠标经过和离开
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});
});
};
})(jQuery);
$(function(){
//向左
$("#nav1").dynamicNav({
direction:"left", //动画切换方向，总共4种up 、down 、left 、right
duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
});
//向右
$("#nav2").dynamicNav({
direction:"right",
duration:200
});
//向上
$("#nav3").dynamicNav({
direction:"up",
duration:100
});
//向下
$("#nav4").dynamicNav({
direction:"down",
duration:400
});
});
/script
/head
body
h1向左（速度300毫秒）/h1
ul class="nav" id="nav1"
lia href=""首页/a/li
lia href=""前端技术/a/li
lia href=""视觉设计/a/li
lia href=""文章归档/a/li
lia href=""工具/书籍/a/li
lia href=""关于我/a/li
/ul
h1向右（速度200毫秒）/h1
ul class="nav" id="nav2"
lia href=""首页/a/li
lia href=""前端技术/a/li
lia href=""视觉设计/a/li
lia href=""文章归档/a/li
lia href=""工具/书籍/a/li
lia href=""关于我/a/li
/ul
h1向上（速度100毫秒）/h1
ul class="nav" id="nav3"
lia href=""首页/a/li
lia href=""前端技术/a/li
lia href=""视觉设计/a/li
lia href=""文章归档/a/li
lia href=""工具/书籍/a/li
lia href=""关于我/a/li
/ul
h1向下（速度400毫秒）/h1
ul class="nav" id="nav4"
lia href=""首页/a/li
lia href=""前端技术/a/li
lia href=""视觉设计/a/li
lia href=""文章归档/a/li
lia href=""工具/书籍/a/li
lia href=""关于我/a/li
/ul
/body
/html
关于js中利用DOM动态改变CSS样式，请大神提供代码
代码如下：
!DOCTYPE html
html
head
meta charset="UTF-8"
titleTest/title
script src="" type="text/javascript" charset="utf-8"/script
style
*{
/*margin: 0px;
padding: 0px;*/
}
.test1{
width: 100%;
height: 22px;
line-height: 22px;
border: 2px solid #ccc;
}
/style
/head
body
div class="test1"公告内容/div
br /
button class="changestyle"更改样式/button
script
$(function(){
$(".changestyle").off("click").on("click",function(){
$(".test1").css({
"font-size":"16px",
"font-weight":"bold",
"border":"2px solid blue",
"width":"200px",
"height":"100px",
"text-align":"center",
"line-height":"100px",
"color":"red"
});
});
});
/script
/body
/html
望采纳！
建站知识:如何使用JS来自由切换css样式表
详细方法如下： 第一步：在连接样式表的元素里定义一个id,例如 link href="1.css" rel="stylesheet" type="text/css" id="css" 我定义的id是css。 第二步：写一个js函数，代码如下： script type="text/javascript" function change（a）{ var css=document.getElementById（"css"）； if （a==1） css.setAttribute（"href","1.css"）； if （a==2） css.setAttribute（"href","2.css"）；}/script这个函数的code可以放在页面的任何地方。 第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下： a href="#" onClick="change（1）"1.css/a a href="#" onClick="change（2）"2.css/a 该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，好比年迈者可以选择一个字体较大的样式表。这里需要留意的两点是：另外假如是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
如何实现JS onClick 点击切换效果
1、使用js动态操作元素样式
//定义onClick方法
function click(){
document.getElementById("p1").style.display="block";
document.getElementById("p2").style.display="none";
}
2、先写好css在onClick事件中改变元素class
.show{display:block;}
.hidden{display:none;}
/定义onClick方法
function click(){
document.getElementById("p1").className="show";
document.getElementById("p2").className="hidden";
}
想用JavaScript实现DIV样式切换
假设有div元素div id="mydiv" class="css1"，和两个样式: .css1{} .css2{}
(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")
(2)如果是换了样式之后，想换回原来的样式，即是切换样式，那么就涉及到一个判断当前样式的问题，此时可以使用方法hasClass()，该方法是判断元素当前是否含有某样式。
(3)所以根据1、2可以实现一个点击切换样式的效果，示例代码如下：
script type="text/javascript"
$("#mydiv").click(function () {
if ($(this).hasClass("css1")) {
$(this).removeClass("css1")
$(this).addClass("css2")
} else if ($(this).hasClass("css")) {
$(this).removeClass("css2")
$(this).addClass("css1")
}
})
/script
(手写不易，望采纳！)
JS 动态修改CSS 样式方法/全局
如何配置自行百度
1.scss文件定义变量
2.js中更改$textColor 变量的值
都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
详情转自：
