嵌套在CSS中的Javascript

Javascript nested within CSS

本文关键字：Javascript 中的 CSS 嵌套      更新时间：2023-09-26

我有一个想法，我不完全确定解释器是否已经无法处理这个问题，但我确信它没有。因此，我的问题是，口译员是否已经处理好了我即将提出的想法。

从本质上讲，我想做的是将一块Javascript嵌套到样式表的不同位置。Javascript块应该能够访问其嵌套的CSS块的范围。也许一个示例代码块会使这一点更加清晰。

.page {
    <script>
        target.header = document.createElement('div');
        target.header.className = 'pageHeader';
        target.header.heightPerc = 0.2;
        target.header.widthPerc = 1;
        target.header.height = target.clientHeight * target.header.heightPerc;
        target.header.width = target.clientWidth * target.header.widthPerc;
        target.header.style.height = (target.clientHeight * target.header.height) + 'px';
        target.header.style.width = (target.clientWidth * target.header.width) + 'px';
        target.header.style.borderBottom = '1px solid black';
        target.header.style.position = 'absolute';
        target.header.style.top = '0px';
        target.header.style.left = ((target.clientWidth - target.header.width) / 2) + 'px';
        target.appendChild('target.header');
    </script>
}

在我的示例中，target是CSS选择器持有的当前元素

正如您所看到的，这是一个CSS类选择器，里面有一块Javascript，当然这是不起作用的。理论上，这个Javascript块充当CSS选择器捕获的每个元素的模板（类似于angular.js，但与CSS同时编译）。有没有一种方法可以做到这一点（不使用第三方库或框架）？。

我想要的另一个用途是这样的：

HTML:

<img class="image1" ></img>

CSS：

.image1{
    <script>
        target.src = "(URL for image)";
    </script>
}

如果现在有什么方法可以做这些事情，请告诉我！

不，我认为这行不通。这样的东西行得通，但我不认为这是你想要的。

<script>
document.write("<style>body { background: black }</style>")
</script>

不是javascript，但您可以使用PHP来实现这一点：

index.css.php

<?php
header("Content-type: text/css");
# Settings
$height = 135; // px
# CSS
echo ".header { height: {$height}px; }";
...

然后，您可以像任何其他css文件一样将其包含到文档中：

<link rel="stylesheet" type="text/css" href="index.css.php">

如果您愿意，您甚至可以将客户端参数（如窗口高度等）传递给PHP脚本。。但我认为这近乎疯狂。。

相关文章：