它看起來如何
它應該是什么樣子
不能使用contenteditable是有原因的
像
<input
type="text"
elementStyle="h1"
/>
uj5u.com熱心網友回復：
我有更好的選擇
復制NodeStyle.js
export default function copyNodeStyle(sourceNode, targetNode) {
var computedStyle = window.getComputedStyle(
document.querySelector(sourceNode)
);
console.log(computedStyle);
Array.from(computedStyle).forEach(function (key) {
return targetNode.style.setProperty(
key,
computedStyle.getPropertyValue(key),
computedStyle.getPropertyPriority(key)
);
});
}
AddPost.js
useEffect(() => {
copyNodeStyle("h1", document.querySelector(".addPostTitleInputToH1"));
});
uj5u.com熱心網友回復：
如果您嘗試僅使用 HTML 和 CSS 來設定輸入樣式，則沒有屬性可以將元素樣式設定為h1. 如發現here，大多數瀏覽器將顯示<h1>具有以下默認值的元素：
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}將屬性硬編碼到您的<input>中，您可以實作h1樣式輸入。
input {
border: none;
color: grey;
/*h1 properties*/
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
/*no border even when clicked*/
input:focus {
outline: none;
}uj5u.com熱心網友回復：
您需要更改輸入的寬度和高度或/和字體大小值，如下所示：
<input style="width:100%; height:30px; font-size:30px" type='text' name='name'/>
不可能給它一個 h1 樣式，但是這樣做也可以提供更多的控制權！:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472696.html
標籤：javascript html css 反应