我需要的是在某个start元素处迭代dom,然后遍历start元素下面的所有元素.
这是我到目前为止所做的.
function iterDomFromStartElem = function(startElem, callBackFunc) {
if (startElem !== null) {
var items = startElem.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
callBackFunc(items[i]);
}
}
}
我需要从一些start元素迭代dom的原因是因为我们的团队最近收到了实现字体大小调整的请求;但是,我们使用像素在很多不同的地方静态开发了font-size字段.我意识到更简单的方法是重构现有代码,在页面根目录设置静态字体大小,并在其他地方使用em /百分比,这样如果业务所有者想要对页面进行调整大小控制,我们所要做的就是在一个地方增加字体大小.这个重构需要很多小时,而且我使用最少的工时来完成这项任务.
function resizefont(startElem, scale) {
iterDomFromStartElem(startElem, function(node) {
// get current size of node, apply scale, increase font size
}
}
使用这个原始的JavaScript可以工作,但如果它在css类中声明,我将无法获得font-size.
我知道jquery有一个css属性,如果我有一个jquery对象,我可以做$(this).css(….),所以,
当我调用callBackFunc(items [i])时,如何将items [i]转换为jquery对象,以便在我的回调函数中,我可以做node.css(……)?
我想我可以做$(items [i] .id),也许这是最简单的.
有没有一种更简单的方法用javascript来确定字体大小,即使在css类中声明了该字体大小并且css类附加到该元素?
解决方法:
前言:我认为你最好妥善解决问题.你现在可以通过快捷方式节省一两个小时,但从长远来看可能会花费你.
但重新提出你的实际问题:
how can I convert the items[i] into a jquery object so that in my call back function, I can do node.css(……)?
如果将原始DOM对象传递给$()
,jQuery将返回一个包装器.您无需通过身份证.
您还可以为给定起点的所有后代元素获取jQuery实例,如下所示:
var x = $("#starting_point *");
…虽然你最后仍然会创建很多临时对象,如果你然后循环它,像这样:
$("#starting_point *").each(function() {
// Here, `this` is the raw DOM element
});
这是一个用jQuery循环给定起始点下的所有元素的示例,在这种情况下显示它们的标记和id(如果有的话)并将它们变为蓝色(live copy):
$("#start *").each(function() {
display(this.tagName + "#" + (this.id || "?"));
$(this).css("color", "blue");
});
注意我说下.如果您还想包含#start,则选择器将更改为#start,#start *.
这是一个完整的例子,用于增加以(并包括)给定起始点开始的元素的字体大小,其中字体大小由内联和样式表样式(live copy)进行各种设置:
CSS:
.x13 {
font-size: 13px;
}
.x17 {
font-size: 17px;
}
.x20 {
font-size: 20px;
}
HTML:
<input type="button" id="btnBigger" value="Bigger">
<div id="start" class="x13">
This is in 13px
<p style="font-size: 15px">This is in 15px
<span class="x17">and this is 17px</span></p>
<ul>
<li id="the_list_item" style="10px">10px
<strong style="font-size: 8px">8px
<em class="x20">five</em>
</strong>
</li>
</ul>
</div>
JavaScript的:
jQuery(function($) {
$("#btnBigger").click(function() {
$("#start, #start *").each(function() {
var $this = $(this),
fontSize = parseInt($this.css("font-size"), 10);
display("fontSize = " + fontSize);
$this.css("font-size", (fontSize + 2) + "px");
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。