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属性绝对是内联添加的。

Answer 1

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

在javascript中

<强> HTML

<body onload="myFunction()">

js

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

jquery中的

无需添加正文标记

$(document).ready(function(){

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

Answer 2

您需要设置position:relative

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

根据您的需要设置position:relative或absolute。

<强>更新

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

Answer 3

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

覆盖此问题的一个问题是，您必须确保在模板完成其工作后执行此操作，否则模板将覆盖您的更改。

通过挂钩进入onload，你可能会太早。

如何直接更改模板javascript代码？

您可以尝试使用jquery ready函数，但这取决于它是否在模板之前或之后注册，如果它会产生任何影响。 document.ready（）回调按照它们的注册顺序调用。

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

此外，要使用上/左/右/下定位元素，您需要创建定位上下文。通过将set position:relative添加到h1元素，可以轻松完成此操作。

Answer 4

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秒。可能不理想，但仍然是一种解决方案。

Answer 5

使用Jquery，您可以直接使用css设置内联样式 $（ '＃headerTop'）的CSS（ '顶部'， '470px'）;