Question

有没有办法在css中编写脚本并在需要时调用或执行它？

我需要执行<script>标记。

我需要这样的东西..

css代码

#execute{

<script> ..some script.. </script>

}

所以每当我使用

<html>

.
.
.
.<div id="execute" />
.
.
.
.
</html>

所以，如果我更改脚本，更改将在任何地方反映出来。

有可能吗？

编辑：

是否可以将我的<script></script>标签保存在某些js文件中，我将托管它。然后我将从我的HTML中调用一些函数（），以便脚本将在我需要的任何地方执行。

有人能告诉我任何一个例子，教我如何做到这一点。我没有太多关于Js文件以及如何调用该函数的信息。

谢谢大家

Answer 1

是否在CSS中？ jQuery是一种很棒，简单的方法来做你想要的。您将所有样式信息放在CSS（它的目的）中，并将您的javascript保存在html或.js文件中。看看http://jquery.com。代码看起来像这样

$(function() {
    $('#execute')
        .someCoolFunction()
        .anotherCoolFunction();
});

您在文档准备好后使用$(function() { /* code */ });运行代码，并使用$('#execute')获取带有execute标记的元素。然后，您可以使用该jQuery元素轻松地执行很多很酷的JavaScript。

Answer 2

我相信您正在寻找的是JQuery或Dojo这样的Javascript库。它允许您在具有某些CSS属性的标签上添加事件处理程序，这些属性的行为与您现在尝试的行为完全相同。

修改

以下是从Google CDN中提取Dojo的示例，当您点击任意<div class="execute"></div>块时，该窗口将弹出警告窗口：

<html> <head> <style>  </style> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script>  <script> dojo.ready(function() // Dojo will run this after being initialized { // Get A list of all tags with id execute and add a event onClick dojo.query(".execute").connect("onclick", function(evt) { alert("Event triggered!"); // ... }); }); </script> </head> <body> <div class="execute">Click me 1</div> <br /><br /> <div class="execute">Click me 2</div> </body> </html>

修改2

此示例使用onClick事件，但Dojo（JQuery）允许您执行更多操作。例如，如果你想在.execute divs中动态添加一个图像或onLoad，你可以用与此类似的方式使用Dojo（JQuery）。

使用库可以节省大量的工作，但是如果您仍然希望从javascript文件中编写和调用自己的函数，那么这将是您如何做到这一点的粗略概念：

// myScript.js function foo() { // ... } // page.htm <html> <head> <script src="path/to/myScript.js"></script> </head>  <div class="execute"> <script>  </script> </div> 

Answer 3

不，你不能用这种方式混合CSS和Javascript。你为什么要这样做？

如果您只想要一个常见的JavaScript包，请按照以下步骤操作：

<script type="text/javascript" src="yourscript.js"></script>

Answer 4

将脚本抽象到这样的CSS中并没有多大意义，即使这是一个好主意，也无法完成。

为什么需要在不同的地方反复运行相同的脚本？考虑是否有更好或更简单的方法来做你正在做的事情。

另外，当您在脚本标记中包含具有src属性的脚本时，如果您修改脚本的源文件，则更改将在任何位置持续存在。

Answer 5

您无法在标准CSS中执行此操作。

您可以使用名为“行为”的技术，在CSS上下文中运行代码，在样式表中引用HTC文件（基本上是Javascript）。

但是，这项技术是非标准的，只存在于IE中。因此，它只是真正用来编写黑客来制作IE支持的功能，而这些功能在其他浏览器中并不存在。正在使用的一个例子是CSS3Pie。

如果您正在开发一个永远不会在IE以外的任何浏览器中使用的网站，并且您很乐意使用非标准技术，那么您可能会认为这是您问题的确切答案。但是我强烈建议你不要这样做。

更现实地说，您应该使用JQuery这样的Javascript库，因为您描述的功能几乎是JQuery的标准功能。

使用JQuery，您可以编写这样的代码（在普通的脚本块中，而不是在CSS中！）：

$('.execute').each(function() {
    /* your code here; it would be run for each element on the page with the class of 'execute' */
}

如您所见，它使用CSS样式的选择器语法来选择要使用的元素。

（也是NB：我在这里使用execute作为类名，而不是ID，因为你暗示你想要不止一个 - 注意你永远不要使用相同的ID一次在任何HTML页面中;它是无效的。如果你需要多次同样的事情，请使用一个类。

JQuery具有监视元素更改，响应点击或鼠标悬停等事件的功能。其他类似的库，如Prototype，MooTools和Dojo也可以做类似的工作。

希望有所帮助。

[编辑] 如果对您的问题进行了修改，您是否可以将广告<script>标记放在您想要的页面上的<div>内？

因此，使用JQuery，您可以编写类似的内容，在您想要的每个地方投放广告：

HTML：

 ....
 <div class='execute'></div>
 ....
 <div class='execute'></div>
 ....

Javascript代码（记得还包括JQuery库，否则这不起作用）：

$(document).ready(function () {
    $('.execute').each(function() {
        advertisement(this);   //change to whatever the advertisement script function is called.
    });
});

希望这会让你开始。不过，如果不了解广告剧本，我真的无法帮助你。

此外，提供广告脚本的人员应该能够告诉您如何使用它。

Answer 6

不，但您可以使用脚本来更改DOM中任何元素的CSS属性。

在CSS </script>中使用<script>

6 个答案: