HTML中如何设置button按钮让一个text中的字体变大一号
另外再设置一个button让文字消失,并且再次点击后出现第3个button能复制一个text的内容并在另一个text中出现小弟刚开始接触编程很多不会谢谢各位大神...
另外再设置一个button让文字消失,并且再次点击后出现
第3个button能复制一个text的内容并在另一个text中出现
小弟刚开始接触编程很多不会
谢谢各位大神 展开
第3个button能复制一个text的内容并在另一个text中出现
小弟刚开始接触编程很多不会
谢谢各位大神 展开
1个回答
展开全部
普通的 javascript 函数
<script>
function fontBiger(){
//其实就是给 document.getElementById('text1').style.fontSize 属性赋值 成原来+2
text1=document.getElementById('text1');
text1.style.fontSize=Number(text1.style.fontSize.match(/^[\d]+/i))+2+"px";
}
var i=1;
function fontDisplay(){
//如果style中display属性为none就不现实
text1=document.getElementById('text1');
if(i){
text1.style.display="none";
i=0;
}else{
text1.style.display="";
i=1;
}
}
function fontCopy(){
//直接取得值然后赋值就好
text1=document.getElementById('text1');
text2=document.getElementById('text2');
text2.value=text1.value;
}
</script>
<button onclick="fontBiger();">字体大2px</button>
<button onclick="fontDisplay();">字体消失和显示</button>
<button onclick="fontCopy();">复制字体</button>
<input id="text1" type="text" style="font-size:10px;" value="测试字体1" />
<input id="text2" type="text" />
jQuery代码,需要下载jquery.js文件(jquery.com)并加载。或者直接加载网上的jquery文件也行,不过需要联网
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('#butSize').click(function(e){
$('#txt1').css('font-size',"+=2px");
});
$('#butDisplay').click(function(e) {
$('#txt1').toggle();
});
$('#butCopy').click(function(e) {
$('#txt2').val($('#txt1').val());
});
});
</script>
<button id="butSize">字体大2px</button>
<button id="butDisplay">字体消失和显示</button>
<button id="butCopy">复制字体</button>
<input id="txt1" type="text" value="测试字体1" />
<input id="txt2" type="text" />
<script>
function fontBiger(){
//其实就是给 document.getElementById('text1').style.fontSize 属性赋值 成原来+2
text1=document.getElementById('text1');
text1.style.fontSize=Number(text1.style.fontSize.match(/^[\d]+/i))+2+"px";
}
var i=1;
function fontDisplay(){
//如果style中display属性为none就不现实
text1=document.getElementById('text1');
if(i){
text1.style.display="none";
i=0;
}else{
text1.style.display="";
i=1;
}
}
function fontCopy(){
//直接取得值然后赋值就好
text1=document.getElementById('text1');
text2=document.getElementById('text2');
text2.value=text1.value;
}
</script>
<button onclick="fontBiger();">字体大2px</button>
<button onclick="fontDisplay();">字体消失和显示</button>
<button onclick="fontCopy();">复制字体</button>
<input id="text1" type="text" style="font-size:10px;" value="测试字体1" />
<input id="text2" type="text" />
jQuery代码,需要下载jquery.js文件(jquery.com)并加载。或者直接加载网上的jquery文件也行,不过需要联网
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('#butSize').click(function(e){
$('#txt1').css('font-size',"+=2px");
});
$('#butDisplay').click(function(e) {
$('#txt1').toggle();
});
$('#butCopy').click(function(e) {
$('#txt2').val($('#txt1').val());
});
});
</script>
<button id="butSize">字体大2px</button>
<button id="butDisplay">字体消失和显示</button>
<button id="butCopy">复制字体</button>
<input id="txt1" type="text" value="测试字体1" />
<input id="txt2" type="text" />
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询