我創建了一個佈局,其中我有一個具有多個輸入的表單和一個已經創建的塊元素(Div)。現在我想在輸入字段中給出值(如在px中),並且應該重新創建塊,例如,如果塊最初具有30px寬度和30px高度,現在我想通過輸入更改它,當我提交表單時應該重新創建塊。我認爲這是在JavaScript或jQuery中完成的。請幫助我擺脫這種情況,你的意志會變得渺茫。這裏低於如何重新創建一個元素,通過在javascript或jquery中輸入css屬性
此代碼的小提琴https://jsfiddle.net/gr0q5ea0/
的Html
輸入的高度和寬度和使用的jquery<div class="form-container">
<form action="" id="myForm" name="myForm">
<div class="recreateBox"></div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Height:</label>
<input type="text" class="form-input inputbox" name="height">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Width:</label>
<input type="text" class="form-input inputbox" name="width">
</div>
</div>
</div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Width:</label>
<input type="text" class="form-input inputbox" name="Borderwidth">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Radius:</label>
<input type="text" class="form-input inputbox" name="Borderradius">
</div>
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
CSS
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin: auto auto 35px auto;
max-width: 50%;
top: 17px;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width: 100%;
padding: 14px;
display: inline-block;
box-sizing: border-box;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
border:none;
}
.leftSetction ,.rightSection{
width: 49%;
padding-top: 12px;
box-sizing: border-box;
padding-right: 30px;
position: relative;
float: left;
}
.inputbox{
width: 100%;
}
.recreateBox{
width:150px;
height:150px;
position: relative;
margin: 0 auto;
padding: 15px;
background: #5cb85c;
}
你能請更新小提琴與這個代碼將會是你最仁慈的 –
https://jsfiddle.net/gr0q5ea0/4/你去! – Thoby
@電視我認爲邊界半徑不起作用 –