蹴鞠 大佬有话说 : 2020-3-18 09:52:17
求助前端，input实时监听，也就是字体网站的原理
打算做个页面，成自己的小字体网。
但是在
</head>
<body>
<center>
<a class="Lisalovely"style="font-size:80px">Font</a>
<br><input type="text" id="text" class="box effect1"/><button id="btn" class="btn paper-raise">确定</button>
<aid="div" class="Lisalovely"></a>
</center>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){
var text=document.getElementById("text");
var div=document.getElementById("div");
div.innerHTML=text.value;
//div.innerHTML+=""+text.value;//如果不清空div的内容用这个
}
</script>
这个JS出了问题，只识别一个ID，就没办法用不同的CSS来多字体显示。
求问大佬，我要怎么才能输出成不同的CSS显示。
ruthbaldwin 大佬有话说 : 2020-3-18 10:19:24
本帖最后由 ruthbaldwin 于 2020-3-18 10:40 编辑
HTML:
<div class="font1 font-preview">FONT1</div>
<div class="font2 font-preview">FONT2</div>
<input id="textInput">
CSS:
.font1 {
font-family: "Times New Roman", Times, serif;
}
.font2 {
font-family: Arial, Helvetica, sans-serif;
}
JS:
document.getElementById(‘textInput’).oninput = ({ target: { value } }) => {
for (const e of document.getElementsByClassName(‘font-preview’)) {
e.textContent = value;
}
}
在线演示:
https://jsfiddle.net/g3y2zLeh/
hasamol7468 大佬有话说 : 2020-3-18 09:52:52
本帖最后由 hasamol7468 于 2020-3-18 10:08 编辑
:lol 是我的知识盲区了 楼下大佬解答吧
（正常来说一个页面只能一个ID吧 这个可能需要通过class获取？）
——————
<center>
<a class="Lisalovely"style="font-size:80px">Font</a>
<div><input type="text" class="box effect1"/><button id="btn" class="btn paper-raise">确定</button></div>
<div><button class="btn paper-raise">确定</button></div>
<div id="div" class="Lisalovely"></div>
</center>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementsByClassName("btn paper-raise");
console.log(btn);
var i;/*通过遍历给每个class是btn paper-raise的元素设定onclick*/
for (i = 0; i < btn.length; i++) {
btn.onclick=function(){
var text=document.getElementById("text");
var div=document.getElementById("div");
div.innerHTML="你输入了："+text.value;
//div.innerHTML+=""+text.value;//如果不清空div的内容用这个
}
}
</script>
兼容性未知，感觉还是jquery的选择器舒服哈哈
$(".btn")或者$(".paper-raise")就能搞定哈哈
zxzf 大佬有话说 : 2020-3-18 09:53:50
楼下一定有会的yc008t
繁花似锦 大佬有话说 : 2020-3-18 09:55:22
用VUE框架吧
Evan 大佬有话说 : 2020-3-18 09:55:30
什麽意思？點擊不同的按鈕改變字體？
蹴鞠 大佬有话说 : 2020-3-18 09:58:47
Evan 大佬有话说 : 2020-3-18 09:55
什麽意思？點擊不同的按鈕改變字體？
就是我把每一个字体做成CSS，然后我有个input框，我在这个框里面输入内容，然后页面中的CSS，就实时显示我输入的内容。就等于我可以实时预览我这些字体出来是什么样子
蹴鞠 大佬有话说 : 2020-3-18 10:05:51
hasamol7468 大佬有话说 : 2020-3-18 09:52
是我的知识盲区了 楼下大佬解答吧
（正常来说一个页面只能 …
谢谢老哥，我试试
yrj 大佬有话说 : 2020-3-18 10:06:39
你用了 click事件，所以是点击后触发事件而不是实时。再有，你的代码就是把一段input内容放进a标签，没看到你说的css之类的操作。你的演示demo是不是精简过度了
蹴鞠 大佬有话说 : 2020-3-18 10:38:50
ruthbaldwin 大佬有话说 : 2020-3-18 10:19
HTML:
感谢大佬