Html 在 CSS 中使用 <script>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6558530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using <script> in CSS
提问by Sangram Nandkhile
Is there any way to write script in css and call or execute it whenever required ?
有没有办法在 css 中编写脚本并在需要时调用或执行它？
I need a <script>tag to be executed .
我需要一个<script>要执行的标签。
i need something like this..
我需要这样的东西..
css code
css代码
#execute{
<script> ..some script.. </script>
}
so whenever i use
所以每当我使用
<html>
.
.
.
.<div id="execute" />
.
.
.
.
</html>
so if i change the script changes will be reflected everywhere.
所以如果我更改脚本更改将反映在任何地方。
Is it possible?
是否可以？
EDIT:
编辑：
Is it possible to keep my <script></script>tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.
是否可以将我的<script></script>标签保存 在某个 js 文件中，我将托管它。然后我将从我的 HTML 中调用一些 function() 以便脚本将在我需要的任何地方执行。
Can someone show me any example, tutorial how i can do it. I don't have much information about the Js file and how the function should be called.
有人可以向我展示任何示例，教程我如何做到这一点。我没有太多关于 Js 文件以及应该如何调用该函数的信息。
Thank you all
谢谢你们
采纳答案by redbmk
Does it haveto be in CSS? jQuery is a great, simple way to do what you're asking. You put all your style information in the CSS (what it's intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this
它必须在 CSS 中吗？jQuery 是一种很好的简单方法来完成您的要求。您将所有样式信息放在 CSS（它的用途）中，并将您的 javascript 保存在 html 或 .js 文件中。看看http://jquery.com。代码看起来像这样
$(function() {
$('#execute')
.someCoolFunction()
.anotherCoolFunction();
});
You use $(function() { /* code */ });to run the code when your document is ready, and you use $('#execute')to grab the element with the executetag. You can then do a lot of cool javascript really easily with that jQuery element.
你用来$(function() { /* code */ });在你的文档准备好时运行代码，你$('#execute')用来抓取带有execute标签的元素。然后，您可以使用该 jQuery 元素轻松完成许多很酷的 javascript。
回答by Brad
No, you cannot mix CSS and Javascript this way. Why would you want to?
不，您不能以这种方式混合 CSS 和 Javascript。你为什么要？
If you simply want a common JavaScript include, do it like this:
如果您只是想要一个常见的 JavaScript 包含，请这样做：
<script type="text/javascript" src="yourscript.js"></script>
回答by alxbl
I believe a Javascript library like JQueryor Dojois what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.
我相信像JQuery或Dojo这样的 Javascript 库就是你正在寻找的。它将允许您在具有某些 CSS 属性的标签上添加事件处理程序，其行为与您现在正在尝试做的完全一样。
EDIT
编辑
Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any <div class="execute"></div>block:
这是一个从 Google CDN 中提取的 Dojo 示例，当您单击任何<div class="execute"></div>块时，它会弹出一个警报窗口：
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script> <!-- load Dojo from Google CDN
<!-- Let's register a onClick handle for any .execute div. -->
<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>
Edit 2
编辑 2
This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.
此示例使用 onClick 事件，但 Dojo (JQuery) 允许您做更多的事情。例如，如果您想在 .execute div 中动态添加图像或 onLoad 内容，您可以使用与此类似的方式使用 Dojo (JQuery) 来完成。
Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:
用库来做这件事可以节省你很多精力，但如果你仍然想从 javascript 文件中编写和调用你自己的函数，这是你如何做的一个粗略的想法：
// myScript.js
function foo()
{
// ...
}
// page.htm
<html>
<head>
<script src="path/to/myScript.js"></script>
</head>
<!-- ... -->
<div class="execute">
<script>
<!--
// Call foo()
foo();
-->
</script>
</div>
<!-- ... -->
回答by ambagesia
It doesn't really make sense to abstract a script into CSS like that, and even if it was a good idea, it can't be done.
像这样将脚本抽象成 CSS 并没有什么意义，即使这是个好主意，也做不到。
Why do you need to run the same script over and over in different places? Consider whether or not there might be a better or simpler way to do whatever it is you're doing.
为什么你需要在不同的地方一遍又一遍地运行相同的脚本？考虑是否有更好或更简单的方法来做你正在做的任何事情。
Plus, when you include a script with the srcattribute in the script tag, if you modify the script's source file, the changes persist everywhere.
另外，当您src在脚本标签中包含具有属性的脚本时，如果您修改脚本的源文件，则更改会在任何地方持续存在。
回答by Spudley
You can't do this in standard CSS.
你不能在标准 CSS 中做到这一点。
There is a way in which you canrun code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.
有一种方法可以让您从 CSS 上下文中运行代码，使用称为“行为”的技术，在样式表中引用 HTC 文件（基本上是 Javascript）。
However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn't have which are in other browsers. An example of this in use is CSS3Pie.
但是，该技术是非标准的，仅存在于 IE 中。因此，它只真正用于编写 hack 来使 IE 支持其他浏览器中没有的功能。使用中的一个例子是CSS3Pie。
If you're working on a site which will never be used in any browser other than IE, and you're happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don't do this.
如果您在一个永远不会在 IE 以外的任何浏览器中使用的网站上工作，并且您乐于使用非标准技术，那么您可能会认为这是您问题的确切答案。但是，我强烈建议您不要这样做。
More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.
更现实的是，您应该使用 Javascript 库，例如 JQuery，因为您描述的功能几乎是 JQuery 的标准。
With JQuery, you would write code like this (in a normal script block, not in the CSS!):
使用 JQuery，您可以编写如下代码（在普通脚本块中，而不是在 CSS 中！）：
$('.execute').each(function() {
/* your code here; it would be run for each element on the page with the class of 'execute' */
}
As you can see, it uses a CSS-style selector syntax to select the elements to work with.
如您所见，它使用 CSS 样式的选择器语法来选择要使用的元素。
(also NB: I've used executeas a classname here, not as an ID, because you imply that you want more than one of them -- note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.
（另外注意：我在execute这里用作类名，而不是用作 ID，因为您暗示您需要多个类名——请注意，在任何 HTML 页面中，您永远不应该多次使用相同的 ID；它是无效。如果您多次需要相同的东西，请使用一个类。
JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.
JQuery 具有监视元素变化、响应点击或鼠标悬停等事件等功能。其他类似的库，如 Prototype、MooTools 和 Dojo，也可以做类似的工作。
Hope that helps.
希望有帮助。
[EDIT]
Given the edit to your question, can you not just place the advertisment <script>tag inside the <div>on the page where you want it?
[编辑] 鉴于对您的问题的编辑，您不能将广告<script>标签放在<div>您想要的页面上吗？
So with JQuery, you could write something like this to run your ad in each place you want it:
因此，使用 JQuery，您可以编写如下代码以在您想要的每个位置投放您的广告：
HTML:
HTML：
....
<div class='execute'></div>
....
<div class='execute'></div>
....
Javascript code (remember to also include the JQuery library, or this won't work):
Javascript 代码（记住还要包含 JQuery 库，否则这将不起作用）：
$(document).ready(function () {
$('.execute').each(function() {
advertisement(this); //change to whatever the advertisement script function is called.
});
});
Hopefully that will get you started. I can't really help you much more without knowing more about the advertisement script, though.
希望这会让你开始。但是，如果不了解更多有关广告脚本的信息，我真的无法为您提供更多帮助。
Also, the people who supplied the advert script should be able to tell you how to use it.
此外，提供广告脚本的人应该能够告诉您如何使用它。
回答by chprpipr
No, but you can use script to alter the CSS properties of any element in the DOM.
不，但您可以使用脚本来更改 DOM 中任何元素的 CSS 属性。
