我将输入的默认占位符颜色更改为蓝色。为什么用Javascript会得到黑色的占位符颜色?
const getPlaceholderColor = () => {
let inputEl = document.querySelector('.myClass');
let inputElStyle = window.getComputedStyle(inputEl, '::placeholder');
let resultTarget = document.getElementById('colorResult');
let placeholderColor = inputElStyle.getPropertyValue('color');
resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}
.myClass::placeholder {
color: #004085;
}
.marginTop20 {
margin-top: 20px;
}
<input
type="text"
placeholder="Enter name"
class="myClass"
/>
<button onClick="getPlaceholderColor()">Get placeholder color</button>
<div class="marginTop20" id="colorResult"></div>
最佳答案
问题写在这里=> https://css-tricks.com/almanac/selectors/p/placeholder/
以下是使用:placeholder-shown和:: placeholder的codepen
https://codepen.io/kipomaha/pen/pOOdQr
document.getElementById("myStyles").sheet.insertRule('.myClass:placeholder-shown { color: red; }');
document.getElementById("myStyles").sheet.insertRule('.myClass::placeholder { color: red; }');
const getPlaceholderColor = () => {
let inputEl = document.querySelector('.myClass');
let inputElStyle = window.getComputedStyle(inputEl, ':placeholder-shown');
let resultTarget = document.getElementById('colorResult');
let placeholderColor = inputElStyle.getPropertyValue('color');
resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}
document.getElementById("myStyles").sheet.insertRule('.myClass:placeholder-shown { color: red; }');
document.getElementById("myStyles").sheet.insertRule('.myClass::placeholder { color: red; }');
var inputEl = document.querySelector('.myClass');
var placeholderColor = inputElStyle.getPropertyValue('color');
const getPlaceholderColor = () => {
let inputElStyle = window.getComputedStyle(inputEl, ':placeholder-shown');
let resultTarget = document.getElementById('colorResult');
resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}