Pogrubienie tekstu

Question

Cześć.

Stworzyłem stronę w HTML, w niej formularz, do którego trzeba wpisać swoje dane osobowe. Następnie stworzyłem skrypt po stronie przeglądarki (JS), który wypisuje owe dane. Nie mam jednak pojęcia jak zrobić, żeby później skrypt wypisał te dane, ale w pogrubieniu. Mógłby ktoś pomóc?

Answer 1

wrzuć te elementy tekstu w span, p itp. któremu nadasz klasę odpowiedzialną za pogrubienie. Nie rób pogrubiania w JS jakimiś metodami bold() itp., JS nie powinien interesować się tym, w jaki sposób wyświetlasz dane, JS dostarcza dane + może dynamicznie wyrenderować element DOM, warstwa wizualna to odpowiedzialność CSS.

Comments

Zrobiłem tak jak napisałeś i działa. Dzięki.

Answer 2

Szukaj fontWeight dla JS. Możesz również dane zawrzeć w tagu b podczas wypisywania.

Najlepiej pokaż swój kod.

Answer 3

Pokaż proszę w jakim kontekście są te dane wypisywane, bo może wystarczy ustawić klasę w css, która m. in. będzie "pogrubiała" tekst dla danego elementu html, do którego są zapisywane (wypisywane) dane.  Codepen

<pre class="bold-view"></pre>
<pre class="normal-view"></pre>

.bold-view {
  font: 1.2em;
  font-weight: bold;
}
.normal-view {
  font: 1.1em;
}
.highlitter {
  background-color: limegreen;
  color: white;
  padding: 0 0.25em;
}

const lorem_arr = ['<mark>lorem</mark> ipsum dolor sit amet',
                   'consectetur adipiscing elit',
                   'duis eget elit in <b>turpis</b> vestibulum',
                   'aenean bibendum malesuada lacus',
                   'faucibus <b>tincidunt</b> metus',
                   'suspendisse <span class="highlitter">consectetur pulvinar</span> est sed consequat',
                   'duis sagittis nec ipsum et facilisis',
                   'morbi sodales sollicitudin mauris'];

let view = document.querySelector('.bold-view');
lorem_arr.forEach((value, index) => view.innerHTML += `${index} ${value}\n`);

view = document.querySelector('.normal-view');
lorem_arr.forEach((value, index) => view.innerHTML += `<b>${index}</b> ${value}\n`);

Answer 4

String.bold() do zmiennej dopisuje tag <b>.

"zmienna".bold() == "<b>zmienna</b>"