js通过更改按钮的显示样式实现按钮的滑动效果

通过更改按钮的显示样式,来实现按钮动态滑动


代码如下:

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>

.search{ background:#008800; color:#fff; border:none; height:26px; line-height:20px; width:63x;}
.searchhover{background:#000099; color:#fff; border:none; height:26px; line-height:20px; width:63px; }
</style>

</head>
<body onload="js()">
<input type="button" id="btn" class="search" name="btn" value="登 录"/>
<input type="button" id="btn2" class="search" name="btn" value="注 销"/>
<script type="text/javascript" >

function js()
{
// 使ie6 button支持hover属性 obj是要支持hover的实体 hover是btn:hover的样式,init是初始样式
obj="btn";
alert(navigator.appName);
if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判断ie6
var o = document.getElementsByName(obj);
for(var i=0;i<o.length;i++){
if(o[i].type == "button"){
//o[i].className = "search";
o[i].onmouseover = function(){ this.className = "searchhover"}
o[i].onmouseout = function(){ this.className = "search"};
}
}
}
}
</script>
</body>
</html>

时间: 2014-04-22

js的alert样式如何更改如背景颜色

复制代码 代码如下: window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.s

利用JavaScript更改input中radio和checkbox样式

本文涉及到的图片 body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left

原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

js改变css样式的三种方法推荐

共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

iOS 实现类似QQ分组样式的两种方式

思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

JS使用post提交的两种方式

本文实例讲述了JS使用post提交的两种方式.分享给大家供大家参考,具体如下: 第一种提交post的方式是传统方式,判断浏览器进行post请求. <SCRIPT stype=text/javascript> var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { if(window.ActiveXObject) //如果当前浏览器支持Active Xobject,则创建ActiveXObject对象 { //xmlo

浅析js实现网页截图的两种方式

Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas 和 SVG两种实现方案,原理大概相似,都非真正义上的截图而是把DOM转为图片,然而实现方式却截然不同. Canvas 实现 如何将dom转换成canvas图片?自然是要一点点画到canvas里,想想都是件麻烦事.通过分析github的知名截图库 niklasvh/html2canvas (7k+ star)的源码,梳理了其大致的思路: 递归取出目标模版的所有DOM节点,填充到一个rederList,并

引入CSS样式的五种方式

一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签 将样式规则写在<

详解js跨域请求的两种方式,支持post请求

JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

js获取url参数值的两种方式

方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return n

原生js获取元素样式的简单方法

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

JS获取CSS样式(style/getComputedStyle/currentStyle)

CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar