色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在字段集中居中突出顯示的文本？

CSS
傅智翔1年前7瀏覽0評論

我目前正在做一個類似Google Docs的項目，我已經實現了一個標簽來處理用戶輸入。為了增強用戶體驗，我想包括一個按鈕，當一個按鈕被點擊時，突出顯示的文本在文本框內居中。該功能類似于谷歌文檔中的對齊按鈕。

我嘗試使用JavaScript選擇當前突出顯示的文本，將其包裝在一個div中，并使文本居中，但什么也沒發生。

任何幫助將不勝感激，謝謝。

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");

boldBtn.addEventListener("click", function() {
  boldBtn.classList.toggle("inUse");
});

italicBtn.addEventListener("click", function() {
  italicBtn.classList.toggle("inUse");
});

underlineBtn.addEventListener("click", function() {
  underlineBtn.classList.toggle("inUse");
});

highlightBtn.addEventListener("click", function() {
  highlightBtn.classList.toggle("inUse");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document
  .getElementById("highlight")
  .addEventListener("click", function() {
    var range = window.getSelection().getRangeAt(0),
      span = document.createElement("span");

    span.className = "highlight";
    span.appendChild(range.extractContents());
    range.insertNode(span);
  });

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: lightgrey;
}

.userInput {
  margin: 1px;
  padding: 1px;
  width: 1000px;
  height: 700px;
  resize: none;
  font-family: "Segoe UI", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.inUse {
  background-color: lightblue;
  width: default;
  height: default;
  border-width: thin;
}

button {
  width: 100px;
  /* Make the buttons look awesome */
  border-radius: 5px;
  border: none;
  color: black;
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

.dropbtn {
  /* background-color: #3498db; */
  color: black;
  /* padding: 16px; */
  /* font-size: 16px; */
  border: none;
  cursor: pointer;
  width: 100px;
  height: 30px;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

.highlight {
  background-color: yellow;
}


/* Center all of the buttons horizontally in the div with a class of buttons */

.buttons {
  display: flex;
  justify-content: center;
}

input {
  border-radius: 5px;
  border: none;
  color: black;
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}


/* Make the fieldset look awesome */

fieldset {
  border-radius: 5px;
  border: none;
  color: black;
  font-size: 15px;
  font-family: "Segoe UI", sans-serif;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Editor</title>
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="buttons">
    <button class="bold" onclick="document.execCommand('bold',false,null);" title="Bold">