Question

考虑以下html代码段：

<div id="parent" class="parent">
    <form id="child" class="child"> 
        <input id="textForDim" type="text" /> 
        <input type="submit" value="submit"/>
    </form>
    <div id="divchild" class="childd"><input  type="text" /><br/>
        <div class="cchild"></div>
</div>

和相应的css样式

.parent{
    position: absolute;
    text-align: center;
    width: 350px;
    height: 450px;
    background-color: #f7f7f7;
    -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.childd{
    width:200px;
    height:180px;
    background: grey;
}
.cchild{
    background:aqua;
    width:20px;
    height:10px;    
}

JSFIDDLE。点击submit按钮后，如何在margin-left,margin-right,width,padding-left,padding-right输入中textForDim进行操作，如下所示： margin-left: _Margin-Left_Value_px, margin-right: _Margin-Right_Value_px,等等...... 是否可以根据这种需要应用JS，或者这是一种不好的做法？

_Margin-Right_Value_px是margin-right div元素的divchild属性的值。

Answer 1

<script>
function doThis()
{
    var k = document.getElementById('textForDim');
    k.style.marginLeft = _Margin_Left_Value_px + "px";
    k.style.marginRight = _Margin_Right_Value_px + "px";
}
</script>

<div id="parent" class="parent">
    <form id="child" class="child"> 
        <input  type="text" id="textForDim" onclick="doThis()"/> 
        <input type="submit" value="submit"/>
    </form>
    <div id="divchild" class="childd"><input  type="text" /><br/>
    <div class="cchild"></div>
</div>

边距填充和宽度属性的值

1 个答案: