gpt4 book ai didi

JQUERY CSS如何修改

转载 作者:太空宇宙 更新时间:2023-11-04 04:59:06 24 4
gpt4 key购买 nike

Phill Pafford 提到了这段代码:

resizing a BUTTON through CSS

还有这个例子:

http://jsfiddle.net/3DSGT/

JS:

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="page" id="home"> 
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
<a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
<a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
<a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
<a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
</div>
</div>

我已经试过了,但它不起作用:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<h<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">


// WIDTH
// For all buttons use something like this
$('.ui-btn').css('width','100%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// Height of the button
//$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
$('#theButton2').prev().css('height','50px');

// Height of the font in the button
//$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
$('#hrefButton3').children().children().css('font-size','60px');
​​​
</script>



</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
<a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
<a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
<a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
<a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
</div>
</div>
</body>
</html>

我应该怎么做才能让它发挥作用?在我的例子中,文本保持不变而不是像在图像中。

提前谢谢你。

enter image description here

最佳答案

您运行脚本的时间太早了。

这样做:

$(function()
{
// WIDTH
// For all buttons use something like this
$('.ui-btn').css('width','100%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// Height of the button
//$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
$('#theButton2').prev().css('height','50px');

// Height of the font in the button
//$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
$('#hrefButton3').children().children().css('font-size','60px');
});

关于JQUERY CSS如何修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11815087/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com