javascript - 如何从 HTML 元素更改特定的内联样式？

Question

所以基本上，我只是想从我拥有的 HTML 元素中更改内联样式。

例如，我的h1标签：

<h1 id="headerTop" style="width: 500px; max-width:none; top: 234px;">Something goes here</h1>

top加载页面后，我试图更改为不同的内容。body因此，我试图在我的标签关闭之前使用这段 Javascript ：

<script>
     document.getElementById("headerTop").style.top = "470px";
</script>

虽然，这并没有改变。

我正在尝试这样做，因为我的h1元素最初在我的页面源中没有top属性，直到它被加载到浏览器中。然后给出top: 234px;。似乎无法找出原因。我正在使用从另一个站点购买的模板，所以一定有什么地方导致了这种情况的发生。该top属性肯定是内联添加的。

score 4 · Accepted Answer

首先添加绝对或相对位置以查看更改

在javascript中

html

<body onload="myFunction()">

js

<script>
function myFunction()
{
 document.getElementById("headerTop").style.top = "470px";
}
</script>

在jquery中不需要添加body标签

$(document).ready(function(){

$("#headerTop").css("top","470px");
});

score 2 · Accepted Answer

你需要设置position:relative

您可以使用定位元素设置顶部，左侧，右侧，底部

所以要么设置position:relative，要么absolute根据您的需要。

更新

正如您所说，您已经申请了position:relative，然后尝试在之前编写脚本</body>，看看会发生什么。

score 1 · Accepted Answer

模板可能会挂接到文档 onload 函数或 jquery 就绪函数，并进行一些计算并添加属性。

覆盖它的问题是，您必须确保在模板完成其工作之后执行它，否则模板只会覆盖您的更改。

通过挂钩 onload，您可能会为时过早。

直接更改模板javascript代码怎么样？

您可以尝试使用 jquery ready 函数，但这取决于它是在模板之前还是之后注册的，是否会有任何影响。document.ready() 回调按照注册的顺序被调用。

$(document).ready(function() {
    $("#headerTop").css("top","470px");
});

此外，要使用 top/left/right/bottom 定位元素，您需要创建定位上下文。这很容易通过将 set 添加position:relative到您的 h1 元素来完成。

score 1 · Accepted Answer

jquery方式是：

<script>
$(document).ready(function(){
  $('#headerTop').css({
    'top': '470px'
  });
})
</script>

这会将 id 为“headerTop”的元素上的 css 属性 top 更改为 470px

如果您需要延迟 javascript 执行，您可以执行以下操作：

<script>
$(document).ready(function(){
  setTimeout(function(){
    $('#headerTop').css({
      'top': '470px'
    });
  },1000)
})
</script>

这会导致执行延迟 1 秒。可能并不理想，但仍然是一个解决方案。

score 0 · Accepted Answer

0

使用 Jquery 可以直接使用 css 设置内联样式 $('#headerTop').css('top','470px');

于 2013-10-17T08:49:34.617 回答

5 回答 5