jQuery 如何从 HTML 元素更改特定的内联样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19421853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a specific inline style from a HTML element?
提问by Fizzix
So basically, I am simply trying to change an inline style from a HTML element that I have.
所以基本上，我只是想从我拥有的 HTML 元素中更改内联样式。
For example, my h1tag:
例如，我的h1标签：
<h1 id="headerTop" style="width: 500px; max-width:none; top: 234px;">Something goes here</h1>
I am trying to change topto something different after my page is loaded. Therefore, I am trying to use this piece of Javascript just before the closing of my bodytag:
我正在尝试top在我的页面加载后更改为不同的内容。因此，我试图在我的body标签关闭之前使用这段 Javascript ：
<script>
document.getElementById("headerTop").style.top = "470px";
</script>
Although, this makes no change.
虽然，这并没有改变。
I am trying to do this since my h1element originally has no topattribute within my page source UNTIL it is loaded inside a browser. It is then given top: 234px;. Can't seem to find out why. I am using a purchased template from another site, so there must be something somewhere that is causing this to happen. The topattribute is DEFINITELY being added inline.
我正在尝试这样做，因为我的h1元素最初top在我的页面源中没有属性，直到它被加载到浏览器中。然后给出top: 234px;。似乎无法找出原因。我正在使用从另一个站点购买的模板，所以一定有什么地方导致了这种情况发生。该top属性绝对是内联添加的。
回答by Rituraj ratan
first add position absolute or relative to see changes
首先添加绝对或相对位置以查看更改
in javascript
在 JavaScript 中
html
html
<body onload="myFunction()">
js
js
<script>
function myFunction()
{
document.getElementById("headerTop").style.top = "470px";
}
</script>
in jqueryno need to add in bodytag
在 jquery 中无需添加body标签
$(document).ready(function(){
$("#headerTop").css("top","470px");
});
回答by Dhaval Marthak
You need to set position:relative
你需要设置 position:relative
You can set top,left, right, bottom with positioned elements
您可以使用定位元素设置顶部，左侧，右侧，底部
So either set position:relativeor absoluteaccording to your need.
所以要么设置，position:relative要么absolute根据你的需要。
Update
更新
As you are saying you already applied position:relative, then try writting script just before </body>and see what happens.
正如您所说，您已经申请了position:relative，然后尝试在之前编写脚本</body>，看看会发生什么。
回答by sphair
The template probably hooks into the document onload function, or a jquery ready function, and does some calculation and adds the property.
该模板可能挂钩到文档 onload 函数或 jquery 就绪函数，并进行一些计算并添加属性。
The problem with overriding this is that you have to make sure you are doing it AFTER the template has done its work, otherwise the template will just overwrite your change.
覆盖它的问题是你必须确保在模板完成它的工作后才这样做，否则模板只会覆盖你的更改。
By hooking into onload, you will probably be too early.
通过挂钩 onload，您可能会为时过早。
What about changing the template javascript code directly?
直接更改模板javascript代码怎么样？
You could try to use the jquery ready function, but it depends if this is registered before or after the template if it will have any affect. document.ready() callbacks are called in the order they were registered.
您可以尝试使用 jquery ready 函数，但这取决于它是在模板之前还是之后注册是否会产生任何影响。document.ready() 回调按照它们注册的顺序被调用。
$(document).ready(function() {
$("#headerTop").css("top","470px");
});
Also, to position elements using top/left/right/bottom, you need to create a positioning context. This is easily done by adding set position:relativeto your h1 element.
此外，要使用上/左/右/下定位元素，您需要创建一个定位上下文。这很容易通过将 set 添加position:relative到您的 h1 元素来完成。
回答by netbrain
The jquery way would be:
jquery 的方式是：
<script>
$(document).ready(function(){
$('#headerTop').css({
'top': '470px'
});
})
</script>
This will change the css property top to 470px on the element with an id of "headerTop"
这会将 id 为“headerTop”的元素上的 css 属性 top 更改为 470px
If you need to delay the javascript exection, you could do something like this:
如果您需要延迟 javascript 执行，您可以执行以下操作：
<script>
$(document).ready(function(){
setTimeout(function(){
$('#headerTop').css({
'top': '470px'
});
},1000)
})
</script>
This causes the execution to be delayed by 1 second. Probably not ideal, but a solution nonetheless.
这会导致执行延迟 1 秒。可能并不理想，但仍然是一个解决方案。
回答by Prasad
using Jquery you can directly use css to set inline style $('#headerTop').css('top','470px');
使用 Jquery 可以直接使用 css 设置内联样式 $('#headerTop').css('top','470px');
