英文:
change stye div by option drop down in JavaScript
问题
I tried to do this code HTML/CSS/JavaScript
Have idea Div and options (01-02-03)
When i select option 01 will give me style css ex; shadow, than select option 02 will give me other style shadow
<div id="card-shadow-control" style="width: 100px; border: 1px solid black; margin: auto; padding: 20px; text-align: center">Hello</div>
<select id="choose">
<option value="01" style="box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);">shadow01</option>
<option value="02">shadow02</option>
<option value="03" style="box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);">shadow03</option>
</select>
<script>
function myFunction() {
var x = document.getElementById("choose").options[0].text;
document.getElementById("card-shadow-control").innerHTML = x;
}
</script>
I tried to do that but it doesn't work.
英文:
I tried to do this code HTML/CSS/JavaScript
Have idea Div and options (01-02-03)
When i select option 01 will give me style css ex; shadow, than select option 02 will give me other style shadow
‹div id= card-shadow-control" style="width: 100px; border: 1px solid black; margin: auto;
padding: zOpx; text-align: center >Hello‹/div>
‹select id="choose!>
‹option value="ol" style= box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb (0 0 0 / 0.1) ; "›shadow01‹/option> option value="02"›shadow02‹/option)
<option value="03" style="box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1, 0 8px 10px
- 6px
reb (0 0 0 / 0.1);">shadow03</option) </select>
<script>
function myFunction () {
var x = document. getElementById ("choose") .options [0] .text;
document. getElementById("card-shadow-control").innerHTML=x;}
</script>
I tried to do that but not work
答案1
得分: 0
要更改元素中的 CSS 阴影效果，您应该在 .onchange 事件中执行。获取选项的值并将其用作选择器，以获取所选选项元素上的 data-box-shadow。然后，在 card-shadow-control 中应用它作为阴影样式。确保您的代码如下所示：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("choose").onchange = function() {
var x = document.getElementById("choose").value;
var option = document.querySelector(`option[value="${x}"]`);
if (option.dataset.boxShadow) {
document.getElementById("card-shadow-control").style.boxShadow = option.dataset.boxShadow;
} else {
document.getElementById("card-shadow-control").style.boxShadow = '';
}
}
<!-- language: lang-html -->
<div id="card-shadow-control" style="width: 100px; border: 1px solid black; margin: auto; padding: zOpx; text-align: center">Hello</div>
<select id="choose">
<option value="01" data-box-shadow="0 4px 6px -1px rgba(0, 0, 0, 1), 0 2px 4px -2px rgba(0, 0, 0, 1)">shadow01</option>
<option value="02" selected>shadow02</option>
<option value="03" data-box-shadow="0 20px 25px -5px rgba(0, 0, 0, 1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)">shadow03</option>
</select>
<!-- end snippet -->
以上是代码部分，已翻译完毕。
英文:
To change CSS Box Shadow in the element, you should do that in the .onchange event. Take the value of the option and use it as a selector to get the data-box-shadow on the selected option element. Then, apply it in box-shadow style at card-shadow-control. Make sure your code looks like this :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("choose").onchange = function() {
var x = document.getElementById("choose").value;
var option = document.querySelector(`option[value="${x}"]`);
if(option.dataset.boxShadow) {
document.getElementById("card-shadow-control").style.boxShadow = option.dataset.boxShadow;
} else {
document.getElementById("card-shadow-control").style.boxShadow = '';
}
}
<!-- language: lang-html -->
<div id="card-shadow-control" style="width: 100px; border: 1px solid black; margin: auto;
padding: zOpx; text-align: center">Hello</div>
<select id="choose">
<option value="01" data-box-shadow="0 4px 6px -1px rgba(0, 0, 0, 1), 0 2px 4px -2px rgba(0, 0, 0, 1)">shadow01</option>
<option value="02" selected>shadow02</option>
<option value="03" data-box-shadow="0 20px 25px -5px rgba(0, 0, 0, 1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)">shadow03</option>
</select>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论