Как вставить текстоподобный элемент в документ, используя JavaScript и CSS? - PullRequest
2 голосов
/ 17 сентября 2008

Я хочу использовать JavaScript для вставки некоторых элементов на текущую страницу. Например, это оригинальный документ:

Привет, мир!

Теперь я хочу вставить элемент в текст, чтобы он стал:

Здравствуйте, new world!

Мне нужен тег span, потому что я хочу обработать его позже. Показать или скрыть. Но теперь возникает проблема: если исходная страница уже определила странный стиль CSS для всех тегов , только что вставленный «новый» не будет совпадать с «Hello» и «world». Как я могу избежать этого? Я хочу, чтобы «новое» было точно таким же, как «Привет» и «мир».

Ответы [ 5 ]

1 голос
/ 17 сентября 2008

Просто переопределите любые стили диапазона. Установите свойства макета обратно к настройкам браузера по умолчанию и установите форматирование для наследования от родителя:

span#yourSpan {
  /* defaults */
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;

  /* inherit from parent node */
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-spacing: inherit;
}

Этого должно быть достаточно, хотя вам может потребоваться добавить! Важное, если вы не используете идентификатор:

<span class="hello-node">hello</span>

span.hello-node {
  /* defaults */
  position: static !important;
  display: inline !important;
  ...
}
1 голос
/ 17 сентября 2008

Единственный способ сделать это - изменить другие диапазоны, включив в них имя класса, и применить стили только к диапазонам с этим классом, или переопределить стили, установленные для всех диапазонов, для нового диапазона.

Итак, если вы сделали:

span {
  display: block;
  margin: 10px;
  padding: 10px;
}

Вы можете переопределить с помощью:

<span style="display: inline; margin: 0; padding: 0;">New Span</span>
1 голос
/ 17 сентября 2008

Ну, я не знаю, насколько вы женаты, чтобы использовать тег , но почему бы не сделать это?

<p style="display: inline">Hello <p id="myIdValue" style="display: inline">new</p> World</p>

Таким образом, вставленный html сохраняет тот же стиль, что и внешний, и у вас все еще может быть его дескриптор и т. Д. Конечно, вам придется добавить встроенный стиль CSS, но он будет работать.

0 голосов
/ 17 сентября 2008

Почему бы не присвоить абзацу идентификатор, а затем использовать Javascript, чтобы добавить слово или удалить его, если это необходимо? Конечно, он будет сохранять тот же формат, что и абзац, когда вы вставите слово «новый» или полностью измените содержание абзаца.

0 голосов
/ 17 сентября 2008

Включите определение класса, которое определено в CSS, в вашу версию JavaScript тега <span>.

<span class="class_defined_in_css">

(где этот тег <span> будет частью вашего кода JavaScript.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...