Fatal编程技术网
  • javascript/
  • 如何将javascript变量传递到外部css文件？

如何将javascript变量传递到外部css文件？

javascript html variables

如何将javascript变量传递到外部css文件？,javascript,html,variables,Javascript,Html,Variables,我是编程和网页设计新手，我正在尝试创建一个网站。我对其外观的计划是 所以，我使用的代码是 <body> <div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> <script> function getWidth() { xWidth =

我是编程和网页设计新手，我正在尝试创建一个网站。我对其外观的计划是

所以，我使用的代码是

<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>



<script>
        function getWidth()
        {
            xWidth = null;
            if(window.screen != null)
                xWidth = window.screen.availWidth;

            if(window.innerWidth != null)
                xWidth = window.innerWidth;

            if(document.body != null)
                xWidth = document.body.clientWidth;

            return xWidth;
        }
        function getHeight() {
            xHeight = null;
            if(window.screen != null)
                xHeight = window.screen.availHeight;

            if(window.innerHeight != null)
                xHeight =   window.innerHeight;

            if(document.body != null)
                xHeight = document.body.clientHeight;

            return xHeight;
        }
</script>
</body>


函数getWidth（）
{
xWidth=null；
如果（window.screen！=null）
xWidth=window.screen.availWidth；
如果（window.innerWidth！=null）
xWidth=window.innerWidth；
if（document.body！=null）
xWidth=document.body.clientWidth；
返回宽度；
}
函数getHeight（）{
xHeight=null；
如果（window.screen！=null）
xHeight=window.screen.availHeight；
if（window.innerHeight！=null）
xHeight=window.innerHeight；
if（document.body！=null）
xHeight=document.body.clientHeight；
返回xhweight；
}
之后，我创建了一个.css文件（还没有空）。因此，我想创建一个网站，从读者的屏幕上获取可用的宽度和高度，然后在计算数字后显示相对于可用宽度和高度的div，例如，小框将有height=width=5%available.width\u of\u screen。每个小盒子都将是一个项目或一个帖子

因此，我的问题是：如何在外部css中传递变量数据，以计算我的网站的数字？

谢谢，Gabriel

您可以使用jQuery设置css变量，如下所示：

$("p").css({"background-color":"yellow","font-size":"200%"});
在本例中，您将使用变量替换“黄色”和“200%”。

最好在javascript中隐藏div，而不是在css中进行更改。使用javascript很难将值传递到外部css文件。如果您想更改css，可以从javascript或使用jquery进行更改。标准css不接受变量。你应该学习如何使用百分比单位。无变量的常规CSS中的媒体查询和其他相关布局技术。如果您学习了正确的纯CSS来表达布局，那么您可能不需要计算和变量来完成您要做的事情。@jfriend00外部CSS文件或内联CSS文件中的百分比单位？我是否应该在一个变量中保留宽度和高度以满足我的需要？@gabriel-请阅读CSS中使用百分比单位的相关内容。使用纯CSS（内联或外部-没有区别），您可以将一个框设置为父项宽度的百分比。如果您的家长是整个屏幕的宽度，那么您已经将您的框设置为屏幕宽度的一个百分比？这段代码是针对html文件的，对吗？这对外部css文件有效吗？@gabriel这是一个JavaScript库，在某些情况下可以使使用JavaScript更容易或更高效。@AlexW谢谢！那么，javascript可以在任何.css、.html文件中执行？我应该在哪里执行上述代码？@gabriel No.JavaScript必须在
标记内执行，这些标记通常位于HTML页面的
标记内。JQuery只是JavaScript@gabriel很好的JQuery教程和信息。