无法为来自Javascript的变量数据设置CSS规则_Javascript_Html_Css

无法为来自Javascript的变量数据设置CSS规则

javascript html css

无法为来自Javascript的变量数据设置CSS规则,javascript,html,css,Javascript,Html,Css,我无法使用从JavaScript传递的CSS为DIV设置样式在我的代码中从JAVASCRIPT传递到HTML的所有变量中，我无法用宽度、高度或颜色等来设置它们的样式例如，下面我尝试将图像大小设置为10px 10px，但仅显示完整的原始大小图像我的HTML: <!DOCTYPE html> <html> <head> <script src="/testsite/OneSecondPlaylist.js"></script> &

我无法使用从JavaScript传递的CSS为DIV设置样式

在我的代码中从JAVASCRIPT传递到HTML的所有变量中，我无法用宽度、高度或颜色等来设置它们的样式

例如，下面我尝试将图像大小设置为10px 10px，但仅显示完整的原始大小图像

我的HTML:

<!DOCTYPE html>
<html>

<head>
<script src="/testsite/OneSecondPlaylist.js"></script>

<style type="text/css">
#list0picture {
width: 10px;
height: 10px;
}
</style>

function getPlaylist()
{
var xmlhttp,
timer;

if (window.XMLHttpRequest)
{
    xmlhttp = new XMLHttpRequest();
} 
else
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
{

var list = eval ('('+xmlhttp.responseText+')');
{

document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '"/>';

}


}
};

xmlhttp.onerror = function() 
{
    clearTimeout(timer);
};

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();


timer = setTimeout(getPlaylist, 1000);


#列表0图片{
宽度：10px；
高度：10px；
}


现在玩

我的JAVASCRIPT:

<!DOCTYPE html>
<html>

<head>
<script src="/testsite/OneSecondPlaylist.js"></script>

<style type="text/css">
#list0picture {
width: 10px;
height: 10px;
}
</style>

function getPlaylist()
{
var xmlhttp,
timer;

if (window.XMLHttpRequest)
{
    xmlhttp = new XMLHttpRequest();
} 
else
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
{

var list = eval ('('+xmlhttp.responseText+')');
{

document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '"/>';

}


}
};

xmlhttp.onerror = function() 
{
    clearTimeout(timer);
};

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();


timer = setTimeout(getPlaylist, 1000);

函数getPlaylist（） { var xmlhttp，定时器； if（window.XMLHttpRequest） { xmlhttp=新的XMLHttpRequest（）； } 其他的 { xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { var list=eval（'（'+xmlhttp.responseText+'）； { document.getElementById（“list0artist”）.innerHTML=list[0]。艺术家； document.getElementById（“list0title”）.innerHTML=list[0]。标题； document.getElementById（“list0label”）.innerHTML=list[0]。label； document.getElementById（“list0albumyear”）.innerHTML=list[0]。albumyear； document.getElementById（“list0picture”）.innerHTML=''； } } }; xmlhttp.onerror=函数（） { 清除超时（计时器）； }; open（“GET”，“playlist.php？t=“+Math.random（），true”）； xmlhttp.send（）；定时器=设置超时（getPlaylist，1000）； }

关于正在显示的图像：我知道我可以在JavaScript中添加属性来设置图像传递到HTML时的大小，但是我遇到了一些问题，图像没有完全锁定到我为它创建的DIV中（下面的示例）

document.getElementById（“list0.picture”）.innerHTML=''；

在CSS中，选择器

#list0.artist

看起来像一个ID

list0

和class

artist

的元素。不要因为这个原因在ID中使用句点。如果您必须保留它，只需在选择器中转义点，

#list0\.artist

。

既然您没有提供任何示例代码，我只能假设您的CSS如下所示：

#list0.artist {
    color: red;
}

并且容器上的颜色不会改变

如果是这种情况，那么问题就很简单，

#list0.artist

根本不针对具有

id=“list0.artist”

的元素，而是针对具有

id=“list0”

的元素，同时

class=“artist”

，因为CSS中的点指示这是一个类名，通过将ID和类名连接在一起，可以选择具有所有这些特征的元素

相反，要像这样避开CSS中的圆点：

#list0\.artist{}

你应该没事。

对不起，你对问题的描述非常混乱。您应该尽量简化您的问题，摆脱所有不影响问题的东西，并发布一些示例代码。给我们看看你的CSS怎么样？你是直接把样式分配给图像还是包装器div？除非您在容器上设置了

溢出

，或者在图像上设置了

最大-（高度|宽度）

，否则不会看到任何更改。@Mathletics Hi。。。我两个都试过了，但问题仍然存在。。我无法在CSS中缩放图像，只有JavaScript。。。谢谢。虽然在ID中使用点是有效的，但您只需要在样式表中转义该点。但你是对的，我会避免在ID中使用点，以免造成不必要的混淆。@Xavier_Ex我从未说过它无效，只是因为它会引起头痛。@Mathletics我已经从代码中删除了“.”，并清理了这个问题。。希望这能更好地解释问题。（删除“.”后问题仍然存在）我已从代码中删除“.”并清除了问题。。希望这能更好地解释问题。（即使在卸下“.”后问题仍然存在）