无法使用 Javascript 编辑 CSS 样式

Unable to edit CSS style using Javascript

本文关键字：编辑 CSS 样式 Javascript      更新时间：2023-09-26

我有一个HTML元素，看起来像这样：

<p style=​"font:​12px verdana !important;​margin:20px !important;​">​…​</p>​

现在在某些时候，我需要通过Javascript编辑边距属性。代码如下所示： 

document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.margin='0'
document.getElementsByTagName('div')[3].getElementsByTagName('p')[0].style.marginLeft = '150px'

但是，这是行不通的。在我检查代码前后的"margin"和"marginLeft"的值后，值保持不变。如果我使用Google开发人员工具并手动更改Javascript，则问题已解决。谁能告诉我为什么上面的代码没有改变样式的值？我也尝试使用setAttribute但也没有用。

你可以用jquery试试这个：

$('selector').css('cssText','font:​12px verdana !important;​margin-left:150px !important;');

以这种方式制作，它会覆盖您的内联样式，因此如果您动态修改样式，请小心

你可以使用 jquery 来实现这一点非常简单：

$( ".selector" ).css( "background-color","#fff" );

或者你可以通过这种方式访问你的元素

var elements = $( "body" ).find("div");
var p = elements[3].find("p");
$p[0].css("margin","0px");
$p[0].css("margin-left","150px");

如果您不想使用 jQuery，那么您首先检查您是否正在访问/选择正确的div 和 p 标签，您可以提醒找到的元素的长度，并检查第 3 个元素是否有您要更新的元素？

相关文章：