Question

我有一个变量，其值在0-1范围内，我想根据它确定元素的不透明度。我知道有一种方法可以用css来做，但我想用html来做。这是我的HTML代码：

<td align=center bgcolor=(255,0,0)>

Answer 1

您不能仅使用HTML执行此操作。您将需要CSS规则或Javascript代码来设置CSS值。例如：

.foo {
    opacity: 0.5
}

并为标记设置class="foo"。如果你需要使用Javascript设置不透明度，那么你可以做这样的事情

var myOpacityValue = 0.5;
document.getElementById("myDIV").style.opacity = myOpacityValue;

Answer 2

使用HTMLElement.style

参考HTMLElement.style

function myFunction() {
var opacity = document.getElementById("opacity").value;
document.getElementById("container").style.opacity = opacity;
}

body{
background-color: #ccc;
}
#container{
height:50px;
width:100px;
background-color:#003F87;
color:#000;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}

<h1>Enter the opacity value</h1>
<div id="container"></div>
<input type=number id="opacity" step="0.01" min="0" max="1">
<button onclick="myFunction()">Change</button>

html中的动态不透明度

2 个答案: