In-tag'onload'JS对目标没有影响

时间:2016-01-23 08:53:22

标签: javascript html

我的html.twig模板中有一行。

<div class="panel panel-default" onload="(this.class = determineClass(this))">

以后:

var determineClass = function(element) {
    if (element.offsetHeight < element.scrollHeight) {
        return element.class + ' some_class';
    } else {
        return element.class + ' some_other_class';
    }
}

我希望onload中的字符串可以作为JS执行。但是,字符串按字面解释,对该标记的class没有影响。

如何使用determineClass函数更改此标记的class属性?

1 个答案:

答案 0 :(得分:2)

据我所知,你不能在div上使用onload。使用JQuery,这是一种方法(见fiddle)。

HTML

<div class="panel panel-default determineClass"></div>

JS

$(document).ready(function() {
  $('.determineClass').each(function() {
    $(this).removeClass('determineClass');
    if ($(this).offsetHeight < $(this).scrollHeight) {
      $(this).addClass('some_class');
    } else {
      $(this).addClass('some_other_class');
    }
  });
});

ready确保函数在文档完全加载后运行。我使用类determineClass作为标志来标记需要处理的元素。

加载文档后,我遍历所有标记元素,删除标记类并进行实际处理。