JQuery Mobile - 使用Javascript动态更改CSS [英] JQuery Mobile - dynamically changing css with Javascript

问题描述

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

问题是后面的按钮。它默认为左上角，而我想它垂直居中。为此，我将下面的脚本插入到JQuery Mobile脚本include下面的页眉中。

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（。ui-btn）css（margin，20px）; 
} 
 ; / script> 
  

HTML如下所示：

$ b b

 < div data-role =pageid =maindata-theme =b> 
< div id =myheaderdata -role =header>< div id =header>< div id =logo>< img src =assets / logo.gifalt =Acme/& / div>< / div>< / div> 
  

我也试过：

  $（＃myheader a.ui-btn）。 css（margin，20px）; 
  

和

  $（。ui-btn-left）css（margin，20px）; 
  / pre> 
 
 
并且不嵌套在'$（document）.ready（function（）{'但似乎没有什么工作。
 
 
 
我想改变颜色，但我会继续，一旦我这样做了任何帮助或指针将非常感激。 
 
 
 
感谢
 
 
 
 Greg 
解决方案
您确定是完整的HTML，而且Javascript不会产生任何其他标记吗？
 
 
 
您正在选择一个元素.ui-btn或ui-btn-left，但这些元素不存在于您提供的标记中。
 
 
 
建议您在Firebug中检查它将向您显示由Javascript生成的任何HTML。 
 
 
 
 ------编辑信息后提供------- 
 
 
 
认为你遇到的是你使用margin来控制内联元素的位置。除非由CSS特别地将< a> 或< span> 利润可能不会影响他们的预期。
 
 
 
我建议尝试首先将目标设置为块元素，并应用CSS与外部样式表或在页面上的一些< style> 标记内，而不是使用jQuery。
 
 
 
您引用的那个小JS代码段，并看看它在哪里得到您：
 < style& 
 #myheader a.ui-btn {display：block; margin：20px;} 
< / style> 
  
听起来像我这样的问题不一定是你不能使用CSS与UI交互的HTML ，而是它的行为不是你期望的。 
 
I am having a problem trying to change the css of a button in JQuery Mobile.  I am not using the default page header ie. within the header I have nested a div with a logo etc. so the header height is about double the default.

The problem is with the back button. It defaults to the top left whereas I would like it to be centered vertically.  To this end, I inserted the script below into the page header just below the script include for JQuery Mobile.
<script type="text/javascript">
    $(document).ready(function(){
        $(".ui-btn").css("margin","20px");
    }
</script>
The HTML looks like this:
<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>
I can't seem to interact with the ui css in any way.  I've also tried:
$("#myheader a.ui-btn").css("margin","20px");
and
$(".ui-btn-left").css("margin","20px");
And also not nesting it within '$(document).ready(function(){' but nothing seems to be working.

I'd like to change the colours as well, but I'll move on to that once I've worked this out!  Any help or pointers would be hugely appreciated.  

Thanks

Greg
解决方案
Are you sure that's the complete HTML, and Javascript isn't generating any other markup?

You're selecting an element with a class of .ui-btn or ui-btn-left, but those elements aren't present in the markup you've provided.

Would recommend checking it out in Firebug, as that will show you any HTML generated by Javascript. 

------ EDIT AFTER INFO PROVIDED -------

Ok, I think what you're running into is your use of margin to control the position of an inline element.  Unless the the <a> or the <span>s are specifically set as block elements by the CSS, margin may not affect them the way you'd expect.

I'd recommend trying to first set your target as a block element, and apply the CSS with an external stylesheet or inside some <style> tags on the page, rather than with jQuery.

Try something like this instead of that little JS snippet you referenced, and see where it gets you:
<style>
    #myheader a.ui-btn {display: block; margin: 20px;}
</style>
Sounds to me like the problem is not necessarily that you can't use CSS interact with the UI HTML, but rather that it's not behaving the way you'd expect.   

                        
这篇关于JQuery Mobile  - 使用Javascript动态更改CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！