html 元素的 javascript 样式属性有问题

Question

我正在尝试更改在 HTML 的内联中设置的样式属性。我使用 clickfunnels 作为我的着陆页构建器，我只能添加 CSS 规则。

我的问题是，当您在移动设备上查看网站时，页面右侧有额外的空白 space（请参见屏幕截图）。

我在控制台中对其进行了故障排除，发现如果我手动将 overflow 的属性更改为 auto，问题就解决了。

从那时起我尝试添加各种类型的自定义 css（免责声明我对此并不熟悉）但没有成功。

我尝试添加到 css 的内容：

html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}

getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';

源视图中的元素是这样的：

<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">

这是一张更好地描述了我的问题的屏幕截图：

screenshot of the issue

Answer 1

如果您尝试使用 JavaScript 将样式应用到您的 HTML，您需要访问您正在尝试的 html 的特定样式属性改变。

getElementByID.html='overflow:auto'; 将不起作用。

你应该这样写 document.getElementbyId('your_id').style.overflow = 'auto'

如果您只是想 select 您的 HTML 完全，那么您不需要使用 getElementById，而是可以使用

document.getElementsByTagName('html')[0].style.overflow = 'auto'.

另一种选择是使用外部样式表并实施媒体查询以针对移动视图进行调整。 Here 是如何添加外部样式表。

请参阅 CSS 中的媒体查询示例片段。是一些例子 CSS.

html{
 background-color: pink;
}

@media only screen and (max-width: 300px) {
  /* when screen is this size or smaller, background color will change */
  html {
    background-color: orange;
  }
}

Answer 2

要解决右侧白色 space 的问题，请详细了解 Responsive Web Design。一般来说，我会将我所有的 body 放在一个容器中，并将其边距设置为两边的 50%。

html 元素的 javascript 样式属性有问题

having issues with javascript style properties of an html element

javascript

css

styles

element