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

Question

我在我的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属性？

Answer 1

据我所知，你不能在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作为标志来标记需要处理的元素。

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