2017-02-18 98 views
-1

我正在显示来自json数据的UV索引,但是我无法计算如何显示与UV索引值相关的颜色。如何使用javascript加载html元素的特定类?

到目前为止,这里是我有:

document.getElementById("uvIndex").innerHTML = getUvIndex(); 
 

 
function getUvIndex() { 
 
    miliVolts = 0; 
 
    text = "UV Index: " 
 
    if (miliVolts < 50) { 
 
     text += " 0 <div style='width: 20px; height: 20px; display: inline-block"; 
 
     text += "background-color: rgba(0,190,0, 0.5); position: relative; left: 5px;"; 
 
     text += "top: 5px;background-color: rgba(0,190,0, 0.5);' "; 
 
     text += "width='20'></div>"; 
 
     text += " <div>Exposure Level None - No Light</div>"; 
 
    } 
 
    return text; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="label label-default" id="uvIndex">Loading UV index.</div>

但我是从引导思考,我可以申请类,即基于价值等class="label label-default"东西

回答

0

我。认为你可以使用HTML DOM cl assName属性或jQuery添加类方法。 只需根据您的需要进行定制。 HTML类名属性例如:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.mystyle { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: coral; 
 
    text-align: center; 
 
    font-size: 25px; 
 
    color: white; 
 
    margin-bottom: 10px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the button to set a class for div.</p> 
 

 
<div id="myDIV"> 
 
I am a DIV element 
 
</div> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    document.getElementById("myDIV").className = "mystyle"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

相关问题