javascript - 如何使用 Javascript 初始化自定义 html 类

Question

我想在页面加载时更改某些文本的颜色，但我无法获得任何代码来与自定义类一起运行。

这样使用的 html 类:

<div class="metricCardData">

应该改变一些子属性颜色的 java 脚本:

$('.metricCardData').on('load', function(e) {
    alert("hello")
    var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
    this.getElementsByTagName('h2')[0].className = cssClass
});

我也试过下面的但说加载不是一个函数

$('.metricCardData').load( function(e) {
    alert("hello")
    var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
    this.getElementsByTagName('h2')[0].className = cssClass
});

该警报不会显示。当我将负载更改为“点击”时，它会在点击时起作用，因此负载不能是一个事件。我应该在其中放置什么事件或如何在加载时初始化该自定义类？

编辑所需的 html 看起来像

<div class="metricCardData">
    <h4>Average Size</h4>
    <h2 class="bad">19807.0</h2>
    <p></p>
    <input class="severity" type="hidden" value="BAD">
</div>

在这种情况下，我检查了输入类“严重性”的值 BAD 并且我有一个应用于 h2 的“错误”CSS 类。这些 metricCardData 在 thymeleaf 循环中

Answer 1

您可以使用 jquery 的 $(document).ready()，这样当 DOM 在您的浏览器中加载时，您的脚本就会被执行。 例如:

<div class="metricCardData">Test Text</div>

<script>
  $(document).ready(function(){
     $('.metricCardData').css('color','red');
  });
</script>

如果你想使用类来做到这一点，你可以使用下面的代码

<div id='divId' class="metricCardData">Test Text</div>

<script>
  $(document).ready(function(){
     $('#divId').addClass('ChangeColorClass');
  });
</script>