是否可以更改jquery移动表单元素，将大小增加JS %

Question

我想调整jquery移动表单元素的大小，我正在移动应用程序中使用Phonegap。现在我想调整大小，并给出更多的高度，以表单元素为基础的一些数字或百分比，这将取决于屏幕的大小。我知道jquery Mobile本身处理宽度，但我想通过JS给出高度，这样所有表单元素的高度就会按特定的比率/百分比增加。

我知道JQuery Mobile CSS可以更改，但我想在运行时使用JS更改高度，而不是一次设置CSS。那么，最好的方法是什么呢？

我实际上想要得到屏幕大小，并给所有元素的大小根据一定的百分比。然而，如果我在jQuery Mobile CSS上看到，那么有很多东西我需要设置，并且仍然不确定它是否会被设置。那么有没有什么方法可以在不修改或重写整个CSS的情况下做到这一点呢？或者我只需要编写自定义的CSS和表单元素？

任何建议和努力都将不胜感激。

Answer 1

下面是一个使用输入元素演示这一点的小提琴：http://jsfiddle.net/ezanker/akgEa/

在这个例子中，我有3个文本类型的输入和一个按钮，每次你点击它，按钮的高度都会加倍。该按钮遍历每个输入，获取其当前高度，然后将高度设置为当前高度的2倍。

<div data-role="fieldcontain">
    <label for="textinput-fc1">Text Input:</label>
    <input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
    <label for="textinput-fc2">Text Input:</label>
    <input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
    <div data-role="fieldcontain">
    <label for="textinput-fc3">Text Input:</label>
        <input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>

<input id="btnSet" type="button" value="Set Heights" data-theme="a" />

$('#btnSet').on("click", function(e){
    $("[type='text']").each(function( index ) {
        var curH = $(this).height();
        $(this).height(curH * 2);
    });
});    

注意:根据您使用的表单元素的类型，设置高度不会对所有表单元素都起作用。我建议您在检查器中查看为表单生成的代码，看看为每个元素类型设置高度的最佳方法是什么。