JavaScript 嵌套在 CSS 中

Question

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

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

.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 block 充当 CSS 选择器捕获的每个元素的模板(类似于 angular.js，但与 CSS 同时编译)。有没有一种方法可以完成这样的事情(不使用第三方库或框架)？

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

HTML:

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

CSS:

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

如果目前有任何方法可以做这些事情，请告诉我!

Answer 1

不，我认为这行不通。类似这样的方法可行，但我认为这不是您想要的。

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