怎么将html文本框的选中文本设置成不同颜色或尺寸

怎么将html文本框的选中文本设置成不同颜色或尺寸,第1张

这个实现不了,其它元素如:div、p、span等倒可以用css3的伪元素selection实现
p::selection {/ 非IE内核 /
background: #f6c;
color: #fff;
}
但输入框不行,如果用onselect事件动态改变,是获取不到选中文本的。

语法如下:
<objectstylescrollbarbasecolor ="vcolor
objectstylescrollbarArrowColor = vColor
objectstylescrollbar3dLightColor = vColor
objectstylescrollbarDarkShadowColor = vColor
其中的object为要改变对象的ID名字;
vColor为颜色的名字或RGB数值。

思路就是:获取属性和属性值,拼接字符串,然后通过innerHtml将元素渲染到页面中。具体代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
block{
display: flex;
margin-bottom: 10px;
}
block label{
width: 60px;
text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines;
}
#attr, #value{
width: 220px;
line-height: 20px;
margin-left: 20px;
}
#content div{
width: 200px;
height: 200px;
color:#f00;
text-align: center;
line-height: 200px;
background-color:rgb(109, 203, 240);
}
</style>
</head>
<body>
<div class="block">
<label>属性</label>:
<input type="text" id="attr" />
</div>
<div class="block">
<label>属性值</label>:
<input type="text" id="value" />
</div>
<button onclick="setAttr()" style="margin-bottom: 20px;">设置属性</button>
<div id="content"></div>
</body>
<script>
windowonload = function(){
documentgetElementById("content")innerHTML = `<div>Javascript有点意思</div>`;
}
var style = "";
function setAttr(){
style += `${documentgetElementById("attr")value}:${documentgetElementById("value")value};`;
documentgetElementById("content")innerHTML = `<div style="${style}">Javascript有点意思</div>`;
}
</script>
</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13343623.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-18
下一篇 2023-07-18

发表评论

登录后才能评论

评论列表(0条)

保存