Question

screen_w = window.innerWidth;
screen_h = window.innerHeight;

获取窗口deminsions然后将其设置为变量。有没有办法获取该变量，然后以我的风格使用它？

如：

img
{
  width:screen_w;
  height:screen_h;
}

我试过了

<script type="text/javascript"> 
<style>
img..
</style>
</script>

但这似乎不起作用..这是否可能或是否有其他方式传递变量？

提前致谢。

///添加

好的链接那里--- v

正在讨论制作一个“风格”的节点

<script type="text/javascript">

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createNode('img { width:screen_w; height:screen_h; }');

style.type = 'text/css';
if(style.styleSheet)
    style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);

</script>

那么对于我的html，我只需要插入我的图片。

<img src="slide1.jpg">

但它仍然没有以某种方式传递。

然而，我可以使用“document.getElementById来工作。有没有办法在没有按钮的情况下执行此操作..比如onLoad（）？

function changeSize()
{
document.getElementById("picture").height= screen_h;
document.getElementById("picture").width= screen_w;
}
</script>

</head>

<body>

<img id="picture" src="slide1.jpg" width="300" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image" />

Answer 1

您无法将变量传递给CSS。

但是，您可以直接使用javascript来更改图像样式（包括尺寸）。

Answer 2

您可以使用JS修改CSS，请看这个问题：

How to create a <style> tag with Javascript

javascript将变量传递给样式

2 个答案: