使用JavaScript动态设置样式实现代码及演示动画
今天做了一个css的练习,效果有点象Maxthon首页一样。使用onmouseover和onmouseout事件实现不同的效果。如:
你可以使用下面javascript。
代码如下:
<script type="text/javascript">
function DynamicSetStyle(id, attr, val) {
var element = document.getElementById(id);
if (element) element.style[attr] = val;
}
</script>
fieldset应用上面的javascript的DynamicSetStyle方法。
代码如下:
<fieldset id="fs1" style="margin: 10px; padding: 10px; width: 170px; text-align: center;"
onmouseover="DynamicSetStyle('fs1','border-color','#3599ff')" onmouseout="DynamicSetStyle('fs1','border-color','')">
ERP
<a href="http://xxx.xxx.com/erp" target="_blank">http://xxx.xxx.com/erp </a>
</fieldset>
相关推荐
-
js批量设置样式的三种方法不推荐使用with
一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{
-
javascript设置金额样式转换保留两位小数示例代码
复制代码 代码如下: //金额格式转换 function parsePrice(s) { var n = 2 //设置保留的小数位数 s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.split(".")[0].split("").reverse(); var r = s.split(".&qu
-
js动态设置div的值下例子
复制代码 代码如下: <!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=&qu
-
JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo
-
javascript动态设置样式style实例分析
本文实例讲述了javascript动态设置样式style的方法.分享给大家供大家参考.具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中 操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为 javascript中-是不能做属性,类名的.所以在CSS中背景色是background-clolor,而javasc
-
js setattribute批量设置css样式
firefox等可以使用 var dom=document.getElementById("name"); dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ; IE中则必须使用style.cssText var dom=document.getElementById("name"); dom1.style.cssText = &q
-
使用变量动态设置js的属性名
目标:js的属性名可以使用变量 举例:js对象object,当赋给该对象属性的时候可以采用以下方式 复制代码 代码如下: var object; object.prop1 = "value1"; object.prop2 = "value2"; 也可以采用如下方式: 复制代码 代码如下: object.push({prop1:"value1"}); object.push({prop2:"value2"}); 在这里prop1
-
使用JavaScript动态设置样式实现代码(2)
你可以参考到前一版本 http://www.jb51.net/article/33555.htm 这个有点不好的地方,就是如果想改变样式,也许得使用查找替换才行. 因此,Insus.NET写出另外一个方法来实现,这样可以改一应用百. 先写一个样式Style: 复制代码 代码如下: <style type="text/css"> .overStyle { border-color:#3599ff; } .outStyle { border-color: #fff; } <
-
javaScript 读取和设置文档元素的样式属性
首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返
-
JavaScript通过元素的ID和name设置样式
1.说明 (1)根据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") (2)根据参数中的标记,返回对一组元素的引用或节点 document.getElementsByTagName("td") 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
javascript 动态设置已知select的option的value值的代码
复制代码 代码如下: funtion setSelectOption(a,b){//a =>select 的id名,b=>已知option的值 for (i=0;i<$(a).length;i++) //$(a)获取a的id的简单写法,前提是必须用引用prototype.js if($(a).options[i].value == b){//遍历select $(a).options[i].selected=true;//选中特定值 break; }
-
js style动态设置table高度
直接在table标签中设置下不就行了吗?这是静态的,如果要动态设置你会吗? function com_onresize(){ var contentsHeight = document.body.clientHeight; var buttonsHeight = document.getElementById( "buttons" ).offsetHeight; var head1Height = document.getElementById( "head1" )
-
IE6下JS动态设置图片src地址问题
这两天赶一个项目,要求鼠标点击小图显示大图,于是用JS来根据小图来设置大图的SRC,设计完后问题就出来了.在IE6下大图显示不出,鼠标放置在图片上右键链接地址是可以正常显示链接地址的,并且点击显示图片图片才能被正常显示.IE7,IE8和FF是没有这些问题的.代码如下: 复制代码 代码如下: function picclick() { var pic = $('marqueediv').getElementsByTagName('a'); var len = pic.length; for(var
-
js 设置选中行的样式的实现代码
复制代码 代码如下: //设置选中的行样式. function SetSelectTrClass(seltr, selclass, unselclass) { var thetable = seltr.parentElement; //i从1开始是因为列名的样式不变 for (var i = 1; i < thetable.rows.length; i++) { var tr = thetable.rows[i]; tr.className = unselclass; } seltr.class
随机推荐
- 第十四节 命名空间 [14]
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- 关键字排名(Keyword Ranking)
- JQuery对checkbox操作 (循环获取)
- JQuery组件基于Bootstrap的DropDownList(完整版)
- C++实现图形界面时钟表盘代码
- js控制div弹出层实现方法
- CheckBoxList两列并排编译为表格显示具体实现
- ASP.NET Core发送邮件的方法
- PHP使用memcache缓存技术提高响应速度的方法
- python下调用pytesseract识别某网站验证码的实现方法
- C++中Overload,Override,Hide之间的区别
- 基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
- shell脚本编程之for语句、if语句使用介绍
- 防止别人盗链的好方法推荐
- javascript object oriented 面向对象编程初步
- 微信小程序 swiper制作tab切换实现附源码
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- python实现按行切分文本文件的方法
- 浅析Java编程中枚举类型的定义与使用