возникли проблемы со свойствами стиля javascript элемента html - PullRequest
Новая
       20

возникли проблемы со свойствами стиля javascript элемента html

0 голосов
/ 02 февраля 2020

Я пытаюсь изменить свойство стиля, которое установлено в строке в HTML. Я использую clickfunnels как конструктор целевой страницы и могу добавлять только CSS правила.

Моя проблема в том, что при просмотре сайта на мобильном устройстве в правой части страницы появляется дополнительное свободное место (см. снимок экрана).

Я обнаружил неполадки в консоли, чтобы выяснить, что если я вручную изменю свойство 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;">

вот скриншот лучше описать мою проблему:

скриншот проблемы

Ответы [ 2 ]

0 голосов
/ 02 февраля 2020

, чтобы решить проблему пробелов справа, узнайте больше о Отзывчивый веб-дизайн . в общем, я бы положил все свое тело в один контейнер и установил его поле равным 50% с обеих сторон.

0 голосов
/ 02 февраля 2020

Если вы пытаетесь использовать JavaScript для применения стилей к вашему HTML, вам необходим доступ к указанному свойству c стиля вашего html, которое вы пытаетесь изменить.

getElementByID.html='overflow:auto'; не будет работать.

Вы должны написать что-то вроде document.getElementbyId('your_id').style.overflow = 'auto'

Если вы просто пытаетесь выбрать свой HTML целиком, вам не нужно использовать getElementById, а вместо этого можно использовать

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

Другой альтернативой является использование внешней таблицы стилей и реализация медиазапросов для настройки мобильного представления. Здесь - как добавить внешнюю таблицу стилей.

См. Фрагмент примера запроса медиа в 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;
  }
}
...