美文网首页
1.1 用js控制div

1.1 用js控制div

作者: 我很棒棒哒 | 来源:发表于2017-07-29 17:51 被阅读0次

重要的几个点:

var changeStyle = function (elem, attr, value)

{elem.style[attr] = value};

window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况.

window.onload = function ()

{

var oBtn = document.getElementsByTagName("input");

var oDiv = document.getElementById("box");

var oAtt = ["width","height","background","display","display"];

var oVal = ["200px","200px","red","none","block"];

for (var i = 0; i < oBtn.length; i++)

{

oBtn[i].index = i;

oBtn[i].onclick = function ()

{

this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

changeStyle(oDiv, oAtt[this.index], oVal[this.index])

}

}

};

也可以按照

function setStyle(name,value){

var oDiv=document.getElementById('box');

oDiv.style[name]=value;

}

在input中添加:

onclick="setStyle('width','500px')";

问题:

后面的一种方法中重置的这个功能没实现怎么做。

相关文章

  • 1.1 用js控制div

    重要的几个点: var changeStyle = function (elem, attr, value){el...

  • js

    js控制div的显示与隐藏

  • 2018-05-17

    js小案例-----控制Div属性 控制div属性 outer{width:500px;margin:0 auto...

  • 《HTML控制DIV的显示与隐藏》

    《HTML控制DIV的显示与隐藏》 通过JS控制DIV的显示和隐藏。具体代码如下:

  • JS用键盘控制DIV移动

    键盘控制DIV移动需要用到onkeydown事件,当然也需要知道按键的键值keyCode,这样才能起效果。另外需要...

  • 自己用js写的一个tab卡

    整体思想:元素上加onclick()监听,js设置div的style来控制显示与否 记得加上js控制:

  • 脚本化初识

    一、脚本化:用JS去控制css样式1、获取css样式(1)获取行内样式var style=div.stylesty...

  • vue 新闻轮播

    div部分 js部分 data() { return { //控制动效是否开启 animate:false,...

  • 格式化时间

    1.全局js 1.1 在common目录下新建date.js vue中引入 定义filter 1.2.应用 div...

  • JS键盘事件 长按停顿问题

    问题描述:用js的键盘事件控制一个div移动,当按下一个方向键不放,div会先停顿一下,然后才开始持续移动。(原因...

网友评论

      本文标题:1.1 用js控制div

      本文链接:https://www.haomeiwen.com/subject/bhlclxtx.html