js之css样式特效 ---- js篇
2024-06-20 21:54:24
一、概述
- getElementById( ) 获取id属性值
- getElementsByName( ) 获取name属性值
- onMouseOver 鼠标指针移动目标元素上
- onMouseOut 当鼠标指针移动到目标元素之外
- display的inline 、block与none属性
display显示属性实现层或图片的隐藏/显示和切换特效
div{display:block} 有换行作用。
案例：图片做背景，隐藏图片上文字div{display:None } 隐藏对象及对象内容。
案例：CSS隐藏HTML内容div{display:Inline } 在一排显示。
代表案例，对li列表默认一排显示li{display:Inline }
|
参数值 |
描述 |
|
block |
默认值。按块显示，换行显示. 用该值为对象之后添加新行 |
|
none |
不显示 ，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。 |
|
inline |
按行显示，和其他元素同一行显示。 |
1.1、常见的css样式
1.2、回顾css样式表
|
文本属性 |
说 明 |
|
font-size |
字体大小 |
|
font-family |
字体类型 |
|
font-style |
字体样式 |
|
color |
设置或检索文本的颜色 |
|
text-align |
文本对齐 |
|
背景属性 |
说 明 |
|
background-color |
设置背景颜色 |
|
background-image |
设置背景图像 |
|
background-repeat |
设置一个指定的图像如何被重复 |
|
名称 |
说 明 |
|
不带下划线的超连接 |
A { color: blue; text-decoration: none;} A:hover{ color: red; } |
|
细边框样式 |
.boxBorder { border-width:1px; border-style:solid; } |
|
图片按钮样式 |
.picButton{ background-image: url(images/back2.jpg); border: 0px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } |
1.3、示例
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>改变样式</TITLE><STYLE type="text/css" >
.tablelogin { border:1 solid #C9F98E; width:813; background-image:url(images/list-bg.gif)}
.td1 {color:#FF8951; font-weight:bold; text-align:center}
/*设置细边框样式*/
.textboder { border:1 solid #C9F98E}
/*设置无下划线的超连接样式*/
A {color: blue;text-decoration: none;font-size:12px} /*鼠标移入时调用的样式*/
.mouseOverStyle{background-image: url(images/bgbtn2.jpg);color:#CC0099;border:0 px;margin: 0px;padding: 0px;height: 23px;width: 82px;font-size: 14px;
}/*鼠标移出时调用的样式*/
.mouseOutStyle{background-image:url(images/bgbtn1.jpg);color:#0000FF;border:0 px;margin: 0px;padding: 0px;height: 23px;width: 82px;font-size: 14px;
}
</STYLE>
</HEAD><BODY>
<FORM action="" method="post">
<TABLE height="261" align="center" cellpadding="0" cellspacing="0" class="tablelogin">
<TR><TD height="102" colspan="2"></TD>
</TR>
<TR><TD colspan="2"> </TD></TR>
<TR><TD height="48" colspan="2" class="td1">欢 迎 来 到 腾 讯 客 服 中 心</TD>
</TR>
<TR><TD width="444" height="23" align="right">会员名： </TD><TD width="454"><INPUT type="text" class="textboder" onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"></TD>
</TR>
<TR>
<TD height="32" align="right">密码： </TD>
<TD><INPUT type="text" class="textboder" onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"></TD>
</TR>
<TR>
<TD colspan="2" align="center"><INPUT type="button" value=" 登 录 " class="mouseOutStyle" onMouseOver="this.className='mouseOverStyle'" onMouseOut="this.className='mouseOutStyle'">
<DIV style="position:absolute; left: 564px; top: 251px;"><A href="#">忘记密码</A></DIV></TD>
</TR>
</TABLE>
</FORM >
</BODY>
<P> </P>
<P></P>
</BODY>
</HTML>
二、js改变样式特效
2.1、创建改变样式的JavaScript代码
this.style.fontSize='24px'
this.style.fontSize='14px‘
2.2、利用鼠标相关事件调用JavaScript代码
onMouseOver="this.style.fontSize='24px'“
onMouseOut="this.style.fontSize='14px'"
2.3、示例点击连接放入文本框、鼠标点击改变按钮
<HTML>
<HEAD>
<TITLE>JAVASCRIPT改变CSS样式</TITLE>
<STYLE type="text/css">
a{text-decoration:none}
a:hover{text-decoration:underline}
.textboder { border:1 solid #FF8080}
.mouseOverStyle{background-image: url(images/back2.jpg);color:#CC0099;border:0 px;margin: 0px;padding: 0px;height: 23px;width: 82px;font-size: 14px;
}
.mouseOutStyle{background-image:url(images/backbutton.gif);color:#0000FF;border:0 px;margin: 0px;padding: 0px;height: 23px;width: 82px;font-size: 14px;
}
</STYLE><SCRIPT type="text/javascript" language="javascript">
function show(desc){document.getElementById("result").value=desc;
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="361" height="182"><tr><Td width="353" height="42"><H2>哪个是你最喜欢的游戏</H2></Td></tr><TR><TD><A href="javascript:show('大海战2')" onMouseOver="this.style.fontSize='18px'" onMouseOut="this.style.fontSize='14px'">大海战2</A><BR><BR><A href="javascript:show('仙剑奇侠传')" onMouseOver="this.style.fontSize='18px'" onMouseOut="this.style.fontSize='14px'"> 仙剑奇侠传</A><BR><BR><A href="javascript:show('联合进攻')" onMouseOver="this.style.fontSize='18px'" onMouseOut="this.style.fontSize='14px'"> 联合进攻</A><BR></TD></TR><TR><TD>你选择的是<INPUT type="text" name="res" id="result" onMouseOver="this.style.borderColor='green'" onMouseOut="this.style.borderColor=''"><INPUT type="button" value=" 确 认 " class="mouseOutStyle" onMouseOver="this.className='mouseOverStyle'" onMouseOut="this.className='mouseOutStyle'"></TD></TR>
</TABLE></BODY>
</HTML>
2.4、单击鼠标出现菜单
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE> 菜单的显示和隐藏</TITLE>
<SCRIPT type="text/javascript" language="javascript">
function showMenu(show,hidden){document.getElementById(show).style.display="block";document.getElementById(hidden).style.display="none";
}</SCRIPT>
</HEAD><BODY>
<TABLE width="381" border="0" cellspacing="0" cellpadding="0"><TR><TD colspan="2"></TD></TR><TR><TD ><DIV><TABLE width="181" height="400" border="0" align="right" style="background-repeat:no-repeat"><TR><TD width="180" height="140"></TD></TR><TR><TD align="center"><A href="javascript:showMenu('m1','m2')"><IMG src="data:images/help_2.JPG" width="146" height="35" border="0"></A></TD></TR><TR ><TD align="center" ><DIV id="m1" style="display:none;"><IMG src="data:images/m1.jpg"></DIV></TD></TR><TR><TD align="center"><A href="javascript:showMenu('m2','m1')"><IMG src="data:images/help_3.JPG" width="146" height="35" border="0"></A></TD></TR><TR ><TD align="center" ><DIV id="m2" style="display:none;"><IMG src="data:images/m2.jpg"> </DIV></TD></TR><TR><TD align="center"><A href="#"><IMG src="data:images/help_4.JPG" width="146" height="35" border="0"></A></TD></TR><TR><TD height="155"> </TD></TR></TABLE></DIV></TD><TD valign="top"></TD></TR>
</TABLE></BODY>
</HTML>
2.5、使用DIV层实现点卡的切换特效
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片的切换效果</TITLE>
<SCRIPT language="javascript">
function InitImage( )
{document.getElementById("mobile").style.display="none";document.getElementById("mobile2").style.display="none";document.getElementById("game1").style.display="none";
}
function showPhone( )
{ document.getElementById("game1").style.display="block";document.getElementById("mobile2").style.display="block";document.getElementById("game2").style.display="none";document.getElementById("mobile1").style.display="none";;document.getElementById("game").style.display="none";document.getElementById("mobile").style.display="block";
}function showGame( )
{ document.getElementById("game2").style.display="block";document.getElementById("mobile1").style.display="block";document.getElementById("game1").style.display="none";document.getElementById("mobile2").style.display="none";document.getElementById("game").style.display="block";document.getElementById("mobile").style.display="none";}</SCRIPT>
</HEAD><BODY onLoad="InitImage( )">
<TABLE border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD><IMG src="data:images/game1.jpg" id="game1" onMouseOver="showGame()" ><IMG src="data:images/game2.jpg" id="game2" ></TD><TD><IMG src="data:images/mobile1.jpg" name="mobile1" id="mobile1" onMouseOver="showPhone()"><IMG src="data:images/mobile2.jpg" width="98" id="mobile2" ></TD></TR>
<TR><TD colspan="2"><IMG id="game" src="data:images/card1.jpg" ><IMG id="mobile" src="data:images/phone.jpg" ></TD></TR>
</TABLE>
</BODY>
</HTML>
2.6、层的显示与隐藏
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的显示和隐藏</TITLE>
<STYLE type="text/css">
#bg{background-image:url(images/bg.jpg); background-repeat:no-repeat; height:432px; width:430; position:absolute; z-index:3}
.btn{BORDER-RIGHT: #ffffff 0px solid;BORDER-TOP: #ffffff 0px solid;BACKGROUND-IMAGE:url(images/work_place.gif);BORDER-LEFT: #ffffff 0px solid;COLOR: #333333;BORDER-BOTTOM: #ffffff 0px solid;BACKGROUND-COLOR: #e7e7e7;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif, "宋体";height: 27px;width: 78px;z-index:2;left: 234px;top: 167px;
}
#place {position:absolute;left:65px;top:199px;width:311px;height:117px;z-index:1;background-color: #FFFFFF;background-image: url(images/layerBack.jpg);display:none
}
</STYLE>
<SCRIPT type="text/javascript" language="javascript">
function showMAP(){
document.getElementById("place").style.display="block";//block将层显示}
function closeMe( )
{document.getElementById("place").style.display="none";//none将层隐藏
}
function selectPlace(place)
{document.getElementById("workplace").value=place;document.getElementById("place").style.display="none";
}
</SCRIPT>
</HEAD><BODY>
<DIV id="bg"><DIV style="position:absolute; left: 234px; top: 166px; width: 78px;"><INPUT name="workplace" type="button" class="btn" value=" 工作地点 " onClick=" showMAP( )"></DIV><DIV id="place" style="background-repeat:no-repeat"><TABLE width="311" height="109" border="0" cellspacing="0" style="font-size:12px"><TR><TD> </TD><TD> </TD><TD> </TD><TD align="right"><A href="javascript: closeMe( )">关闭</A></TD></TR><TR><TD width="70"><A href="javascript: selectPlace('北京')" >北京</A></TD><TD width="67"><A href="javascript: selectPlace('上海')" >上海</A></TD><TD width="78"><A href="javascript: selectPlace('广州')">广州</A></TD><TD width="88"><A href="javascript: selectPlace('武汉')">武汉</A></TD></TR><TR><TD><A href="javascript: selectPlace('成都')">成都</A></TD><TD><A href="javascript: selectPlace('徐州')">徐州</A></TD><TD><A href="javascript: selectPlace('深圳')">深圳</A></TD><TD><A href="javascript: selectPlace('珠海')">珠海</A></TD></TR></TABLE>
</DIV>
</DIV>
</BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>层的隐藏和显示</TITLE>
<SCRIPT type="text/javascript" language="javascript">
function show(){var desc=document.getElementById("desc").value;if(desc=="点击查看协议内容"){document.getElementById("agreement").style.display="block";document.getElementById("desc").value="隐藏协议";}else{document.getElementById("agreement").style.display="none";document.getElementById("desc").value="点击查看协议内容";}
}
</SCRIPT>
</HEAD><BODY>
<TABLE width="600" border="1" align="center">
<TR><TD colspan="2" align="center"></TD>
</TR><TR><TD height="32" colspan="2" align="center"><INPUT id="desc" type="button" name="btn" value="点击查看协议内容" onClick="javascript:show()"> </TD></TR>
</TABLE>
<DIV id="agreement" style=" display:none; position:absolute; left: 199px; top: 268px;">
<TABLE border="1" width="600"> <TR ><TD width="114">拍拍协议</TD><TD><TEXTAREA name="fwtk" cols="50" rows="5">腾讯公司依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意本协议，才能够享受本网站提供的服务。您在拍拍网登录即表示您完全接受本协议的全部条款。
重要须知： 腾讯在此特别提醒用户认真阅读本《拍拍网用户服务协议》--- 用户应认真阅读本《拍拍网用户服务协议》 (下称《协议》)中各条款，包括免除或者限制腾讯责任的免责条款及对用户的权利限制。请您审阅并接受或不接受本《协议》（未成年人应在法定监护人陪同下审阅）。除非您接受本《协议》条款，否则您无权使用本网站提供的相关服务。您的使用行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。</TEXTAREA> </TD></TR>
</TABLE>
</DIV>
</BODY>
</HTML>
2.7、用户登录示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>登陆</TITLE> <META http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK rel="stylesheet" type="text/css" href="../css/public.css"><LINK rel="stylesheet" type="text/css" href="../css/public.css">
<STYLE type="text/css">
td{ font-size:12px; font-family:Verdana}
.lefttd {text-align:right; padding-right:20px; font-family:"新宋体"}
a {text-decoration:none; font-size:12px; color:#0000FF}
a:hover{color:red}
.loginMain {border:1px solid #57A0ED;padding-bottom:10px;background:#EEF5FF;margin-bottom:25px
}
.inputMain {border:1px solid #718DA6;height:17px;padding:2px 0 0 4px;width:120px
}
.loginHead {padding-left:50px; background-image:url(images/login_head.gif);padding-top:14px; height:27px;line-height:4px;font-size:13px;color:#fff;font-weight:bold
}.picButton{ background-image:url(images/login_submit.gif);border:0px;margin: 10px;padding: 0px;height: 30px;width: 137px; font-size: 14px;cursor:hand;
}
.mouseOut{ background-image:url(images/submit.gif);border:0px;margin: 10px;padding: 0px;height: 30px;width: 137px; font-size: 14px;cursor:hand;
}
</STYLE>
</HEAD><BODY>
<DIV id="head" align="center"></DIV><DIV align="center"><FORM action="../index.html" method="post"><TABLE><TR><TD width="418" style="padding-top:30px"><TABLE width="381" cellpadding="0" cellspacing="0" class="loginMain" align="center"><TR><TD colspan="2" height="27" class="loginHead">拍拍用户登陆</TD></TR><TR><TD width="120" class="lefttd">QQ号码:</TD><TD width="265"><INPUT type="text" class="inputMain" onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> <A href="#" onMouseOver="this.style.fontSize='14px'" onMouseOut="this.style.fontSize='12px'">忘记QQ号码>></A></TD></TR><TR><TD class="lefttd">QQ密码:</TD><TD><INPUT type="password" class="inputMain" onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> <A href="#" onMouseOver="this.style.fontSize='14px'" onMouseOut="this.style.fontSize='12px'">忘记密码>></A></TD></TR><TR><TD width="120" class="lefttd">验证码:</TD><TD width="265"><INPUT type="text" class="inputMain" onMouseOver="this.style.borderColor='red'" onMouseOut="this.style.borderColor=''"> </TD></TR><TR><TD height="42"> </TD><TD ><A href="#" >看不清，换一张 </A></TD></TR><TR><TD height="71" colspan="2" align="center"><IMG src="data:images/code.jpg"></TD></TR><TR><TD colspan="2" align="center"><INPUT type="submit" value="" class="picButton" onMouseOver="this.className='mouseOut'" onMouseOut="this.className='picButton'"></TD></TR><TR><TD colspan="2" align="center"><INPUT type="checkbox" value=""><A href="#">阅读并同意拍拍用户协议</A> </TD></TR></TABLE> </TD><TD width="320" style="padding-top:10px"></TD></TR></TABLE></FORM>
</DIV>
<DIV id="foot"></DIV>
</BODY>
</HTML>
2.8、display和visible属性的区别
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>弹出关闭层</TITLE>
<STYLE type="text/css">
<!--
.STYLE1 {color: #FF0066}
/*当去掉DIV的样式时，display:none与visibility:hidden的才会有区别。
否则没有区别，您可以测试测试。
#advLayer {position:absolute;left:11px;top:112px;width:325px;height:135px;z-index:1;
}
*/
-->
</STYLE>
</HEAD><BODY>
<P><SPAN class="STYLE1">注意：</SPAN>当去掉DIV的样式时，display:none与visibility:hidden的才会有区别，如下例所示：</P>
<P><INPUT name="placeButton" type="button" value=" display:none关闭层 " onClick="javascript: document.getElementById('advLayer').style.display='none'"><INPUT name="placeButton2" type="button" value=" display:block弹出层 " onClick=" javascript: document.getElementById('advLayer').style.display='block'">
</P>
<P><INPUT name="placeButton3" type="button" value=" visibility:hidden关闭层 " onClick=" javascript: document.getElementById('advLayer').style.visibility='hidden'"><INPUT name="placeButton22" type="button" value=" visibility:visible弹出层 " onClick="javascript: document.getElementById('advLayer').style.visibility='visible'">
</P><DIV id="advLayer"><IMG src="data:images/advPic.jpg" width="360" height="190" ></DIV><H1>层下方的内容</H1>
<H1>层下方的内容</H1>
<H1>层下方的内容</H1>
<H1>层下方的内容</H1>
<H1>层下方的内容</H1>
<H1>层下方的内容</H1></BODY>
</HTML>
2.9、src属性实现图片切换效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片切换</TITLE></HEAD>
<BODY><A href="#"><IMG src="data:images/change_pic1.JPG" name="picture" width="330" height="210" border="0" align="middle" onMouseOver="this.src='images/change_pic2.jpg'" onMouseOut="this.src='images/change_pic1.jpg'"> </A>
<H2 class="STYLE1"> 移过来看看俺啊</H2>
</BODY>
</HTML>
2.10、图片轮流显示的横幅广告
2.10.1、带按钮轮换横幅广告
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>带按扭的轮换横幅广告</TITLE>
<STYLE type="text/css">
a{/*设置无下划线、文字背景超连接样式*/
color:#ffffff;
font-size:13px;
text-decoration:none;
background-color:#ff0000;
width:20px;
}</STYLE>
<SCRIPT language="JavaScript">var NowFrame = 1;var MaxFrame = 4;function show(d1) {if(Number(d1)){clearTimeout(theTimer); //当触动按扭时，清除计时器NowFrame=d1; //设当前显示图片}for(var i=1;i<(MaxFrame+1);i++){if(i==NowFrame)document.getElementById('div'+NowFrame).style.display =''; //当前图片示elsedocument.getElementById('div'+i).style.display ='none'; //隐藏其他图片层}{ if(NowFrame == MaxFrame) //设置下一个显示的图片NowFrame = 1;elseNowFrame++;}theTimer=setTimeout('show()', 3000); //设置定时器，显示下一张图片}</SCRIPT>
</HEAD><BODY onLoad="show();">
<DIV style="position:absolute;left:200px;top:60px;">
<IMG src="data:image/ad-01.jpg" style="display:none;" id="div1" border="0">
<IMG src="data:image/ad-02.jpg" style="display:none;" id="div2" border="0">
<IMG src="data:image/ad-03.jpg" style="display:none;" id="div3" border="0">
<IMG src="data:image/ad-04.jpg" style="display:none;" id="div4" border="0">
</DIV>
<DIV style="position:absolute;left:440px;top:230px;" align="center"><A href="javascript:show(1)">1</A> <A href="javascript:show(2)">2</A> <A href="javascript:show(3)">3</A> <A href="javascript:show(4)">4</A>
</DIV></BODY>
</HTML>
2.10.2、简单的轮换横幅广告
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>轮换横幅广告</TITLE><SCRIPT language="JavaScript">var NowFrame = 1;var MaxFrame = 3;function show() {for(var i=1;i<(MaxFrame+1);i++){if(i==NowFrame)document.getElementById('div'+NowFrame).style.display =''; //当前图片显示elsedocument.getElementById('div'+i).style.display ='none'; //其他的图片隐藏}{ if(NowFrame == MaxFrame) //定义下一张显示的图片NowFrame = 1;elseNowFrame++;}theTimer=setTimeout('show()', 3000); //设置定时器，显示下一张显示的图片}</SCRIPT>
</HEAD><BODY onLoad="show();">
<DIV style="position:absolute;left:200px;top:60px;">
<IMG src="data:image/1.jpg" style="display:none;" id="div1" border="0">
<IMG src="data:image/2.gif" style="display:none;" id="div2" border="0">
<IMG src="data:image/ad-02.jpg" style="display:none;" id="div3" border="0">
</DIV></BODY>
</HTML>
js之css样式特效 ---- js篇相关推荐
- html5 js 修改css样式,关于js改变css样式的写法
html> 浮动去空格 button { margin: 0; } /*这里clear:both,为的就是当左浮动之后,这个p不会跟着去浮动,如果设置none,那么p元素会跟着浮动*/ p { ...
- 左右全屏banner焦点图 代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍 源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等 源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
- js,jquery,css,html5特效
js,jquery,css,html5特效 包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- js如何修改html样式,怎么用js改变css样式？
怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...
- [JavaWeb-Bootstrap]CSS样式和JS插件
CSS样式和JS插件 1. 全局CSS样式:* 按钮:class="btn btn-default"* 图片:* class="img-responsive": ...
- JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.g ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- 通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值 修改某一元素的class名,使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <h ...
最新文章
- ArcGIS.Server.9.2.DotNet自带例子分析（一、二）
- 深入理解ajax系列第六篇——头部信息
- EFCore Lazy Loading + Inheritance = 干净的数据表 （一）
- 前端学习（552）：api
- 全栈工程师薪水_2020 Java 全栈工程师进阶路线图，不可错过
- Java 进栈出栈的过程
- VTP冲突的排查与解决
- 一点Python学习资源
- 复利计算1.0,2.0,3.0（java）
- lopatkin俄大神精简Windows 10 Pro 19042.487 20H2 PreRelease x86-x64 ZH-CN BIZ(2020-09-01)
- 京东下单接口sdk java,Flutter 插件开发-接入京东SDK唤醒(ios篇)
- VMVare 打不开磁盘xxx.vmdk
- View事件分发机制分析
- 网路游侠：用网络运维操作管理平台进行网络安全管理
- python降低图片分辨率怎么调_使用PIL调整图片分辨率
- BNNVGG2-VGG Net
- Android 编译 Jack简介
- 涅槃重生，力荐大型分布式手册，凤凰架构让你浴火成神，良心分享
- 自己写的加班申请、审批微信小程序（有源码）
- 菊风云 | 视频会议在银行业的发展 - 机遇与挑战并存