春之虎翼---用JavaScript控制html组件属性

最新推荐文章于 2025-05-29 10:17:42 发布

风里追风

最新推荐文章于 2025-05-29 10:17:42 发布

阅读量177

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_39042981/article/details/89476203

版权

前端专栏收录该内容

6 篇文章

订阅专栏

在做实验预约弹窗的时候注意的点：

1.在html中调用javascript：

 <input id="{$value.id}" name="choose" type="button" onclick="popBox(id)"  value="预约">

其中popBox是JavaScript的函数括号中的id是传入的值。

2.弹窗的样式：
先利用JavaScript中的函数获得组件再将对应的style显示出来：

 		var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";

css样式：

 #popLayer {
        width : 100%;
        height: 2000px;
        display: none;
        background-color: #B3B3B3;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
    }

    /*弹出层*/
    #popBox {
        display: none;
        background-color: #FFFFFF;
        z-index: 11;
        width: 400px;
        height: 400px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }

3.注意在使用JavaScript获取组件属性的时候：

  doucment.getElementsByName('1').disabled = "disabled";

注意使用getElementByName的时候并不能对属性进行更改，所以我在使用这种方法的时候就更改失败了。随后我使用更改生效，具体原因不明，等以后成为大神再来填坑。

 document.getElementById("11").disabled = "disabled";