javascript - 边距填充和宽度属性的值

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 的值divchild的属性(property)div 元素。

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>