来自 关于计算机 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

focus效果的方法,js操作css属性实现div层展开关闭

本文实例呈报了JavaScript完成为input与textarea自定义hover,focus效果的法子。分享给大家供大家参谋。具体如下:

本文实例汇报了js操作css属性达成div层展按钮闭效果的措施。分享给大家供我们参考。具体解析如下:

那边演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也正是鼠标放上去之后的作用,focus是鼠标宗旨难题,要落实这种功能,要求JS来协作,这么些事例正是很不利的,它把网页上输入框和文本框都投入了鼠标悬停和鼠标核心效应。

近日学javascript接触到js对css属性操作,就写了个扩充关闭效果,同偶然候实现了按键文字切换,很轻松啊!这段Js对象操作css属性完结div层的拓宽关闭效果。将代码分享给JS前端设计者。

运营作效果果截图如下:

<title>js操作div展开关闭</title>
<style>
  #jb51 { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style="cursor:pointer" onclick="show('jb51');"
type='button' value='展开' id='inp'>
<div id="jb51">脚本之家提供编程源码、网站源码、网页素材、
书籍教程、网站模板、网页特效代码等!</div>
<script>
function show(id){
  var aiin = document.getElementById(id);
  var inp= document.getElementById('inp');
  if(aiin.style.display != 'block'){
    aiin.style.display = 'block';
    inp.value='关闭';
  }else{
    aiin.style.display = 'none';  
    inp.value='展开';
  }
}
</script>

图片 1

指望本文所述对大家的javascript程序设计有着帮助。

在线演示地址如下:

您大概感兴趣的篇章:

  • 基于JS怎么样落到实处类似QQ好朋友头像hover时来得资料卡的效应(推荐)
  • JS组件Bootstrap dropdown组件扩展hover事件
  • JavaScript落实为input与textarea自定义hover,focus效果的办法
  • javascript消除IE6下hover难点的秘技
  • js模仿hover的有血有肉落到实处代码
  • js hover 计时器(实例代码)
  • jQuery调节图片的hover效果(smartRollover.js)
  • 详解Javascript动态操作CSS
  • JS操作CSS随机改动网页背景达成思路
  • 接纳js操作css完结js改造背景图片示例
  • JS完毕css hover操作的不二等秘书籍身体力行

切切实实代码如下:

<title>JavaScript为input/textarea自定义hover,focus效果</title>
<script type="text/javascript">
function suckerfish(type, tag, parentId) { 
if (window.attachEvent) { 
window.attachEvent("onload", function() { 
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 
type(sfEls); 
}); 
} 
} 
sfHover = function(sfEls) { 
for (var i=0; i < sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=" iptHover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iptHover\b"), ""); 
} 
} 
} 
sfFocus = function(sfEls) { 
for (var i=0; i < sfEls.length; i++) { 
sfEls[i].onfocus=function() { 
this.className+=" iptFocus"; 
} 
sfEls[i].onblur=function() { 
this.className=this.className.replace(new RegExp(" iptFocus\b"), ""); 
} 
} 
}
</script>
<style type="text/css">
textarea{
border:1px solid #BBE1F1;
width:250px;
height:80px;
}
 .iptHover,input:hover,textarea:hover{
border:1px solid #77C2E3;
}
.iptFocus,input:focus,textarea:focus{
border:1px solid #77C2E3;
background-color:#EFF7FF;
}
</style>
<input type="text" name="textfield" /><br />
<textarea name="textarea"></textarea>
<script type="text/javascript">
suckerfish(sfHover, "input");
suckerfish(sfFocus, "input");
suckerfish(sfHover, "textarea");
suckerfish(sfFocus, "textarea");
</script>

企望本文所述对我们的javascript程序设计有着扶助。

您或者感兴趣的稿子:

  • 遵照JS怎样落实类似QQ亲密的朋友头像hover时显示资料卡的意义(推荐)
  • JS组件Bootstrap dropdown组件扩张hover事件
  • javascript消除IE6下hover难题的点子
  • js模仿hover的实际达成代码
  • js hover 停车计时器(实例代码)
  • jQuery调控图片的hover效果(smartRollover.js)
  • js操作css属性完结div层展开关闭效果的法子
  • 详解Javascript动态操作CSS
  • JS操作CSS随机改变网页背景完毕思路
  • 应用js操作css完成js退换背景图片示例
  • JS达成css hover操作的形式亲自去做

本文由六合联盟网发布于关于计算机,转载请注明出处:focus效果的方法,js操作css属性实现div层展开关闭

关键词: