如何从 HTML 元素更改特定的内联样式？
[英]How to change a specific inline style from a HTML element?
问题描述
So basically, I am simply trying to change an inline style from a HTML element that I have.
所以基本上，我只是想从我拥有的 HTML 元素中更改内联样式。
For example, my h1 tag:例如，我的h1标签：
<h1 id="headerTop" style="width: 500px; max-width:none; top: 234px;">Something goes here</h1>
I am trying to change top to something different after my page is loaded.加载页面后，我试图将top更改为不同的内容。 Therefore, I am trying to use this piece of Javascript just before the closing of my body tag:因此，我试图在我的body标签关闭之前使用这段 Javascript：
<script>
document.getElementById("headerTop").style.top = "470px";
</script>
Although, this makes no change.虽然，这并没有改变。
I am trying to do this since my h1 element originally has no top attribute within my page source UNTIL it is loaded inside a browser.我正在尝试这样做，因为我的h1元素最初在我的页面源中没有top属性，直到它被加载到浏览器中。 It is then given top: 234px;然后给出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 top attribute is DEFINITELY being added inline. top属性肯定是内联添加的。
6 个解决方案
解决方案1
2 2013-10-17 08:39:21
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 jquery no need to add in body tag 在jQuery中，无需添加body标签
$(document).ready(function(){
$("#headerTop").css("top","470px");
});
解决方案2
2 2013-10-17 08:41:03
You need to set position:relative 您需要设置position:relative
You can set top,left, right, bottom with positioned elements 您可以使用定位的元素设置顶部，左侧，右侧，底部
So either set position:relative or absolute according 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>之前编写脚本，然后看看会发生什么。
解决方案3
1 2013-10-17 08:41:10
The template probably hooks into the document onload function, or a jquery ready function, and does some calculation and adds the property. 该模板可能会挂接到文档onload函数或jquery ready函数中，并进行一些计算并添加该属性。
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. 您可以尝试使用jquery ready函数，但这取决于它是否在模板之前或之后注册。 document.ready() callbacks are called in the order they were registered. 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:relative to your h1 element. 通过position:relative对于h1元素添加set position:relative可以轻松完成此操作。
解决方案4
1 已采纳 2013-10-17 08:42:37
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. 这将导致执行延迟1秒。 Probably not ideal, but a solution nonetheless. 可能不是理想的，但是仍然是一个解决方案。
解决方案5
0 2013-10-17 08:49:34
使用Jquery可以直接使用CSS设置内联样式$（'＃headerTop'）。css（'top'，'470px'）;
解决方案6
0 2022-07-24 02:22:07
I am uncertain if this is what might work, for this issue, but it solved my issue so I'm posting it to maybe help someone else.对于这个问题，我不确定这是否可行，但它解决了我的问题，所以我发布它可能是为了帮助其他人。 I wanted to use the display none so I would not take up room on the page , but display visible so my parent div would grow in height instead on the content spilling out on bottom so I used this javascript , hope it can help someone else.我想不使用显示，所以我不会占用页面上的空间，但是显示可见，所以我的父 div 会增加高度而不是内容溢出底部，所以我使用了这个 javascript，希望它可以帮助其他人。
function changeStyle7(){
// Selecting element
var elem = document.getElementById('change');
if( elem.className == "dropdown-content1"){elem.className = "dropdown-content";}
else {elem.className = "dropdown-content1";}
}
Then just added the dropdown_content1 section to my style sheet with the visibility :visible instead of display:none now my parent div grows when i open the hidden div and of course add the onclick changeStyle7() to my button.然后只需将 dropdown_content1 部分添加到我的样式表中，可见性 :visible 而不是 display:none 现在我的父 div 在我打开隐藏的 div 时会增长，当然还会将 onclick changeStyle7() 添加到我的按钮。 almost forgot the html.差点忘了html。
<div class="dropdown-content"id="change"> some stuff</div>
<style>
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content1 {
visibility: visible;
position: relitive;
</style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.