请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
利用伪元素实现div元素的placeholder属性
HTML元素里头,文本框如 input[type=text] 和 textarea 拥有 placeholder 属性,该属性用于设置元素文本内容为空时所显示的提示文本,增强人机交互友好性。div 元素则没有此属性,需要另寻他径。
实现方法不止一种,最简单、性能也最好的当属纯 CSS 实现方式。请看代码:
<style>
.myDiv {
margin: 10px auto;
width: 600px;
height: 200px;
border: 1px solid gray;
padding: 20px;
position: relative;
}
.myDiv:empty::before {
content: '尚未创建内容,请点击创建';
position: absolute;
color: #999;
}
</style>
<div class="myDiv"></div>
<script>
const myDiv = document.querySelector('.myDiv');
myDiv.onclick = () => toggleContent(myDiv);
function toggleContent(elm) {
const content = '内容已创建,单击清除';
elm.textContent = elm.textContent === '' ? content : '';
}
</script>
【代码解释】
核心在 CSS .myDiv:empty::before 选择器的设置,该设置首先使用伪类 :empyt 来设定 div 元素渲染伪元素的条件,即内容为空时;接着设置伪元素的 ::before ,有内容、定位、前景色等属性。
JS代码并未参与模拟 placeholder 属性的设置,在这里它只是协助实现演示。函数 toggleContent(elm) 所实现的功能很简单:判断 elm 元素内容是否为空,如是,令其为预设的内容,反之令其内容为空。
|