如何在javascript中添加css类以便在加载时使用_Javascript

如何在javascript中添加css类以便在加载时使用

javascript

如何在javascript中添加css类以便在加载时使用,javascript,Javascript,我试图在页面最初打开时加载一个弹出的lightbox窗口。我可以通过单击使其工作，但我无法正确获取代码以在脚本中添加类。我在HTML Kickstart中使用“Lightbox” 工作的链接如下所示：此链接工作正常。基本上，我如何让它在页面加载时自动工作我对脚本的尝试： <script type="text/javascript"> function load() { var target = location.href = "#bbc";

我试图在页面最初打开时加载一个弹出的lightbox窗口。我可以通过单击使其工作，但我无法正确获取代码以在脚本中添加类。我在HTML Kickstart中使用“Lightbox”

工作的链接如下所示：

此链接工作正常。基本上，我如何让它在页面加载时自动工作

我对脚本的尝试：

<script type="text/javascript">
    function load() {
        var target = location.href = "#bbc";
        target.className = "lightbox";
    }
</script>


函数加载（）{
var target=location.href=“#bbc”；
target.className=“lightbox”；
}

您需要在

标记的

onLoad

事件上调用

load（）

函数

<body onLoad="load()">

所以我假设您想向锚定标记添加一个类：

$(function () {
    $("a[href=#bbc]").addClass("lightbox");
});

使用

$（function（）{…}）

与使用函数（在JQuery中）相同。我建议在DOM准备就绪后运行代码，而不是“加载”时运行代码。我阅读此问题的方式是忽略标题，即用户试图在加载时触发lightbox。虽然这可能是一个错误的假设，但使用javascript触发链接的方法是使用

。click（）

方法：

window.onload = function(){
  var i, list = document.getElementsByTagName('a');
  for ( i=0; i<list.length; i++ ) {
    /// this will only work for links with only a class name of lightbox.
    /// you could look into using getElementsByClassName or something similar.
    /// I use getElementsByTagName because I know how supported it is.
    if ( list[i].className == 'lightbox' ) {
      list[i].click();
    }
  }
};

但是，您可能会发现，在阅读您正在使用的lightbox插件的文档时，您可以从JavaScript使用一个命令，而不是单击目标链接。

@AkshayJoy W3傻瓜。我认为OP想要使用

JavaScript

而不是

jQuery

@user2428069的可组合副本：但我认为使用

jQuery

比核心

JavaScript

@PradipKharbuja HTML Kickstart是一个jQuery库要容易得多，所以可以公平地假设OP可以使用jQuery解决方案。请不要对非代码的东西使用代码格式。很抱歉，如果他不能使用jQuery，我总是忘记检查是否需要它。但是我的解决方案应该是可行的。为什么要在事件处理程序中定义函数

load

，并立即调用它？只需将这两行代码直接放入事件处理程序中。无需定义第二个函数。

window.onload = function(){
  var i, list = document.getElementsByTagName('a');
  for ( i=0; i<list.length; i++ ) {
    /// this will only work for links with only a class name of lightbox.
    /// you could look into using getElementsByClassName or something similar.
    /// I use getElementsByTagName because I know how supported it is.
    if ( list[i].className == 'lightbox' ) {
      list[i].click();
    }
  }
};

window.onload = function(){
  document.getElementById('clickonload').click();
};

<a id="clickonload" class="lightbox" href="#bbc">BBC</a>