Question

我在尝试更改JQuery Mobile中的按钮的CSS时遇到问题。我没有使用默认页面标题即。在标题内我嵌套了一个带有徽标等的div，所以标题高度大约是默认值的两倍。

问题在于后退按钮。它默认为左上角，而我希望它垂直居中。为此，我将下面的脚本插入到JQuery Mobile脚本包含的页面标题下。

<script type="text/javascript">
    $(document).ready(function(){
        $(".ui-btn").css("margin","20px");
    }
</script>

HTML看起来像这样：

<div data-role="page" id="main" data-theme="b"> 
<div id="myheader" data-role="header"><div id="header"><div id="logo"><img src="assets/logo.gif" alt="Acme" /></div></div></div>

我似乎无法以任何方式与ui css互动。我也试过了：

$("#myheader a.ui-btn").css("margin","20px");

和

$(".ui-btn-left").css("margin","20px");

并且也没有将它嵌套在'$（document）.ready（function（）{'中，但似乎没有任何效果。

我也想改变颜色，但是一旦我解决了这个问题，我就会继续这样做！任何帮助或指示将非常感激。

由于

格雷格

Answer 1

您确定这是完整的HTML，并且Javascript没有生成任何其他标记吗？

您正在选择类别为.ui-btn或ui-btn-left的元素，但这些元素不会出现在您提供的标记中。

建议在Firebug中查看它，因为它会显示Javascript生成的任何HTML。

------提供信息后编辑-------

好吧，我认为你遇到的是使用margin来控制内联元素的位置。除非<a>或<span>被CSS专门设置为块元素，否则保证金可能不会像您期望的那样影响它们。

我建议首先尝试将目标设置为块元素，然后将CSS应用于外部样式表或应用于页面上的某些<style>标记内，而不是使用jQuery。

尝试这样的事情，而不是你引用的那个小JS片段，看看它在哪里得到你：

<style>
    #myheader a.ui-btn {display: block; margin: 20px;}
</style>

对我而言，问题不一定是你不能使用CSS与UI HTML进行交互，而是它不会按照你期望的方式运行。

JQuery Mobile - 使用Javascript动态更改css

1 个答案: