使用<脚本>在 CSS 中

发布于 2024-11-17 23:35:35 字数 584 浏览 3 评论 0原文

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

我需要执行

我需要这样的东西..css

代码，

#execute{

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

}

所以每当我使用时

<html>

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

，如果我更改脚本，更改将反映在各处。

是否可以？

编辑：

是否可以将我的标记保留在某些 js 文件中，我将托管它。然后我将从我的 HTML 中调用一些 function() ，以便该脚本将在我需要的任何地方执行。

有人可以给我展示任何示例，教程我如何做到这一点。我没有太多关于Js文件以及函数应该如何调用的信息。

谢谢大家

原文

Is there any way to write script in css and call or execute it whenever required ?

I need a <script> tag to be executed .

i need something like this..

css code

#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.

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.

Thank you all

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

錯遇了你 2024-11-24 23:35:35

它必须在CSS中吗？ jQuery 是一种很棒、简单的方法来满足您的要求。您将所有样式信息放入 CSS 中（它的用途），并将 javascript 保留在 html 或 .js 文件中。看一下 http://jquery.com。代码看起来像这样

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

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

Does it have to 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

$(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 execute tag. You can then do a lot of cool javascript really easily with that jQuery element.

回复收藏 0 原文

最丧也最甜 2024-11-24 23:35:35

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

如果您只是想要一个通用的 JavaScript 包含，请这样做：

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

No, you cannot mix CSS and Javascript this way. Why would you want to?

If you simply want a common JavaScript include, do it like this:

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

回复收藏 0 原文

删除→记忆 2024-11-24 23:35:35

在标准 CSS 中你无法做到这一点。

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

但该技术是非标准的，仅存在于IE中。因此，它仅真正用于编写 hack 以使 IE 支持其他浏览器中没有的功能。使用的一个示例是 CSS3Pie。

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

更现实的是，您应该使用 Javascript 库，例如 JQuery，因为您描述的功能几乎是 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 样式选择器语法来选择要使用的元素。

（另请注意：我在这里使用了execute作为类名，而不是ID，因为你暗示你想要多个它们 - 请注意，你永远不应该使用相同的ID超过一旦在任何 HTML 页面中，它都是无效的，如果您多次需要相同的东西，请使用

JQuery 的功能来监视元素的更改，响应单击或鼠标悬停等事件。例如 Prototype、MooTools 和 Dojo也能够做类似的

。

工作
鉴于对您的问题的编辑，您是否可以将广告

因此，使用 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.
    });
});

希望这将帮助您开始。不过，如果不了解更多有关广告脚本的信息，我真的无法为您提供更多帮助。

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

You can't do this in standard CSS.

There is a way in which you can run code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.

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.

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.

More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.

With JQuery, you would write code like this (in a normal script block, not in the 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.

(also NB: I've used execute as 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.

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.

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?

So with JQuery, you could write something like this to run your ad in each place you want it:

HTML:

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

Javascript code (remember to also include the JQuery library, or this won't work):

$(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.

回复收藏 0 原文

孤独陪着我 2024-11-24 23:35:35

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

编辑

下面是一个从 Google CDN 提取 Dojo 的示例，当您单击任何

block:

<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

此示例使用 onClick 事件，但 Dojo (JQuery) 允许您执行更多操作。例如，如果您想在 .execute div 内动态添加图像或 onLoad 内容，您可以使用 Dojo (JQuery) 以与此类似的方式完成此操作。

使用库来做这件事可以节省你很多精力，但如果你仍然想从 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>
<!-- ... -->

I believe a Javascript library like JQuery or Dojo is 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.

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:

<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

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.

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:

// 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>
<!-- ... -->

回复收藏 0 原文