Question

Phill Pafford提到了这段代码：

和这个例子：

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

Answer 1

您过早运行脚本。

这样做：

$(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');
});

Answer 2

以下是答案：

<?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>
  </head>
  <body>
    <script type="text/javascript">      
      $(document).ready(function() {
        $('.ui-btn-text').css('font-size','50px')
        $('.ui-btn-inner').css('height','200px');
        });
</script> 
        <a data-corners="false" href="index.html" data-role="button" data-icon="delete"
          data-iconpos="top" data-theme="a">LIVINGROOM</a> </div>
    </div>
  </body>
</html>

JQUERY CSS如何修改

2 个答案: