Как сделать жирным одно слово на кнопке?

Question

[winser]

При генерации кнопки на js чтобы сделать текст пожирнее делаю так

let button = createEl("button", { text: `Web example` });
button["style"] = `font-weight: 700;`;

Но тут весь текст делается жирным, а как сделать чтобы жирным было только одно слово Web ?

Comments

[Ankhena]

Вставить внутрь спан и стилизовать как угодно

[winser]

Ankhena, покажите на примере, у меня спан внутри отображается как текст, а не как html тег

[Lynn «Кофеман»]

Что такое createEl? Возможно вам нужно его допилить что бы он умел вставлять HTML в кнопку.

В обычном HTML можно писать так:
<button>слово <b>жирное</b> и обычное</button>

[winser]

Lynn «Кофеман», createEl это js функция для генерации html элемента, про обычный html я в курсе, но вопрос исходя из моих условий. html генерируется в javascript.

[Ankhena]

winser, так вставляйте как html, а не как текст.
https://learn.javascript.ru/basic-dom-node-propert...

[winser]

Ankhena, куда и что вставлять ? я же пример попросил. innerHTML я не смог применить чтобы работало как мне нужно.

[Ankhena]

winser, вы же не показываете функцию, как можно сказать, что и где вам поменять?

Вот фантастический пример

let elem = document.createElement('button');
elem.innerHTML = 'Web <b>example</b>';
document.body.append(elem);

[maksam07]

winser, вы даже не показали функцию createEl, будто мы ее уже знаем

[winser]

Ankhena,

button = createEl("button");    
button.innerHTML = "Web <b>example</b>";

сделал так ошибка Evaluation Error: SyntaxError: Unexpected token '.'

[winser]

maksam07, https://docs.obsidian.md/Plugins/User+interface/HT... вот тут про нее, сорян просто не знал что она не стандартная

[Ankhena]

winser, вам уже несколько человек сказали, что нужно показать функцию createEl, мы не знаем что вы в ней написали.

[winser]

Ankhena, два раза уже сбрасывал, вот еще раз https://docs.obsidian.md/Plugins/User+interface/HT...

Answer 1

[Lynn «Кофеман»]

Если я правильно понял доку Обсидиана, то так:

let button = createEl("button");
button.createEl('b', { text: 'Web' });
button.appendText(' example');

на выходе должно получиться
<button><b>Web</b> example</button>

Comments

[winser]

так тоже работает, но пробела почему то нет между Web и example   пробовал

[Lynn «Кофеман»]

winser, вы пробел в последней строке не потеряли?

button.appendText(' example');
//                 ↑

Answer 2

[Сергей delphinpro]

createEl это js функция для генерации html элемента

winser, могли бы и показать эту функцию.
но раз не показываете, я пофантазирую

let button = createEl('button', {
  html: `Web <span>example</span>`,
});

А может быть так

let span = createEl('span',  { text: `Web example` });
span['style'] = `font-weight: 700;`;

let button = createEl('button', {
  text: `Web`,
  children: [ span ],
});

А может быть и так

let button = createEl('button');
button['innerHtml'] = `Web <span>example</span>`;

В общем, вся суть сводится к тому, чтобы внутри разместить html элемент и сделать его шрифт жирным отдельно.

Comments

[winser]

Я думал это стандартная функция, использую ее для скрипта на obsidian
вот про нее
https://docs.obsidian.md/Plugins/User+interface/HT...

попробовал ваши примеры, то что нужно не получилось

[Сергей delphinpro]

winser, Стандартным в javascript считается то, что присутствует без использования всяких фреймворков и библиотек. В стандарте нет функции createEl, а значит ее реализация может быть абсолютно любой.
Мои примеры и не должны были сработать. Я просто пофантазировал, как могла быть устроена ваша функция createEl

[Виктор Майоров]

winser, В документации которую вы прислали ведь есть пример.
https://docs.obsidian.md/Plugins/User+interface/HT...

.book {
  border: 1px solid var(--background-modifier-border);
  padding: 10px;
}

.book__title {
  font-weight: 600;
}

const book = containerEl.createEl("div", { cls: "book" });
book.createEl("div", { text: "How to Take Smart Notes", cls: "book__title" });

[winser]

Виктор Майоров, так а где тут выделение одного слова, а не всего текста ?

[Сергей delphinpro]

winser, пц.

//Создайте кнопку с текстом
let button = createEl("button", { text: `Web` });

//Добавьте внутрь элемент
let span = button.createEl("span", { text: "example" });

//Сделайте внутренний элемент жирным
span['style'] = `font-weight: 700;`;

[winser]

Сергей delphinpro,

button = createEl("button");
       button["style"] = `background: #0099FF; color: black;`;
       let span = button.createEl("span", { text: `Web ` }); 
       span['style'] = `font-weight: 700;`;
       span = button.createEl("span", { text: ` tag:${tag_for_web}|| form:${form_for_web}||${yaml_field_name}:[[current NOTE]]` });

вот так все получилось! А проблел как поставить между словом Web из первого span и tag из второго ?   пробовал

[Сергей delphinpro]

winser, ну например так

button["style"] = `background: #0099FF; color: black;display:inline-flex;gap:1rem;`;

[winser]

Сергей delphinpro, пробел слишком большой, а покороче как ?

[Виктор Майоров]

winser, разберитесь в варианте который вам дали. здесь не фриланс биржа, за вас всю работу никто выполнять не будет!

[Сергей delphinpro]

пц² =)))

gap: 1rem;

[winser]

Сергей delphinpro, Это тоже самое, gap:0.3rem; вот так примерно как нормальный пробел

[Сергей delphinpro]

winser, вы прикалываетесь? Я указал где в представленной мной коде вы можете поменять ширину промежутка. Естественно это то же самое, я же просто скопировал из вышеприведенного примера. Складывается ощущение, что вы не понимаете ни css, ни js, но зачем-то полезли в какой-то фреймворк.. Может книжку почитать для начала?