标签归档：html

demo神马的、javascript、悠哉博主的日常、笔记

iframe元素操作

2013 年 3 月 30 日罗佳(博主) 发表回复

本文所有内容均未测试，只是看着参考写出来的笔记，不保证内容的准确性，如果发现了错误请指出谢谢。

在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。

在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里，然后他一脸黑线，现在我终于知道是为什么了~

接下来进入正文

访问iframe元素的关键就在于要知道连接到iframe的方法，看下面

[PS：不同方法在不同浏览器里可能不可用]

继续阅读 iframe元素操作 →

悠哉博主的日常、神奇的问题、这不是吐槽

关于元素子节点的奇怪事件

2013 年 2 月 20 日罗佳(博主) 发表回复

[前言]请注意这是一只新手写的文章，请高手不要吐槽，假如可以帮我解答或更正错误请在下面留言
今天想修掉本博客的主题【3】的母主题Twenty eleven在评论数显示上的bug
[对我来说是bug，在首页或其他的文章聚合页面，每篇文章右上都会有个评论数框，在没有评论时，它就是一个框在那，非常莫名奇妙。有评论时才会显示数字。]

在这个过程中，由于包含评论数的链接没有任何id或class类,所以决定使用它带有comments-link类的父标签来获取子节点。

于是我在浏览器里先试了一下是否可以成功获取，结果出现这样的情况

[吐槽]我了个去啊！是我睁眼瞎还是浏览器故意的啊！

[恢复]
很明显可以看出，在chrome开发人员工具里，父标签中除了链接没有其它任何东西，那么获取子节点的结果中前后两个是啥？

我们先来单独获取每个#text看看是啥
第一个

$(".comments-link")[0].childNodes[0]

#text

attributes: null

baseURI: "http://localhost:56964/"

childNodes: NodeList[0]

data: "↵ "

firstChild: null

lastChild: null

length: 5

localName: null

namespaceURI: null

nextSibling: a

nodeName: "#text"

nodeType: 3

nodeValue: "↵ "

ownerDocument: #document

parentElement: div.comments-link

parentNode: div.comments-link

prefix: null

previousSibling: null

textContent: "↵ "

wholeText: "↵ "

__proto__: Text

然后是第二个

$(".comments-link")[0].childNodes[2]

#text

attributes: null

baseURI: "http://localhost:56964/"

childNodes: NodeList[0]

data: " "

firstChild: null

lastChild: null

length: 3

localName: null

namespaceURI: null

nextSibling: null

nodeName: "#text"

nodeType: 3

nodeValue: " "

ownerDocument: #document

parentElement: div.comments-link

parentNode: div.comments-link

prefix: null

previousSibling: a

textContent: " "

wholeText: " "

__proto__: Text

第一个的内容看似是回车的符号【难道是换行符？
第二个是一堆tab【在电脑上记事本中选中时是一长条，所以我认为它是TAB

现在我个人得出了结论：在父子节点间的所有内容会分别成为两个文本节点[前后两个](仅个人观点，欢迎修正)

最后我想说：搞什么灰机啊！

html、无聊产物

太阳君和月亮酱

2012 年 10 月 13 日罗佳(博主) 发表回复

上个例子先。。

然后由于某些原因。。在文章后面的这个太阳或者月亮就是例子了。

单独的例子看这里：http://www.luojia.me/shiyanshi.php?id=sunandmoon

————下面是神圣的代码————–

100

101

<html>

<head>

function resunmoondivsize(){

var height=window.innerHeight;

var width=window.innerWidth;

if(height>width){

document.getElementById("sunmoondiv").style.width=width*2;

document.getElementById("sunmoondiv").style.height=width*2;

}

else{

document.getElementById("sunmoondiv").style.width=height*2;

document.getElementById("sunmoondiv").style.height=height*2;

}

document.getElementById("sunmoondiv").style.left=(width-document.getElementById("sunmoondiv").style.width);

var divwidth=document.getElementById("sunmoondiv").style.width;

var divheight=document.getElementById("sunmoondiv").style.height;

var setwidth=width/2;

var setdivwidth=divwidth/2;

document.getElementById("sunmoondiv").style.left=setwidth-setdivwidth;

document.getElementById("sunmoondiv").style.top=divheight/2;

}

function setsunmoon(){

var divwidth=document.getElementById("sunmoondiv").style.width;

var sunwidth=document.getElementById("sun").style.width;

var moonwidth=document.getElementById("moon").style.width;

}

sunshinejiaodu=0;

function zhuansunshine(){

sunshinejiaodu=sunshinejiaodu+0.4;

var jiaodu="rotate("+sunshinejiaodu+"deg)";

$("#sunshine").css({"transform":jiaodu,"-webkit-transform":jiaodu,"-moz-":jiaodu,"-ms-":jiaodu,"-o-":jiaodu});

}

function zhuansunmoon(){

var date=new Date();

var zhengtijiaodu=(date.getHours()*60+date.getMinutes()+date.getSeconds()/60)*0.25;

var jiaodu="rotate("+zhengtijiaodu+"deg)";

$("#sunmoondiv").css({"transform":jiaodu,"-webkit-transform":jiaodu,"-moz-":jiaodu,"-ms-":jiaodu,"-o-":jiaodu});

}

</script>

</head>

</div>

<style>

div.suncolor{background-color:rgba(255,0,0,0.8);}

</style>

</div>

$(document).ready(function(e) {

resunmoondivsize();

setsunmoon();

zhuansunmoon();

setInterval('zhuansunshine()',100);

setInterval('zhuansunmoon()',60000);

$(window).resize(function() {

resunmoondivsize();

});

</script>

</body>

</html>

佳佳酱

标签归档：html

iframe元素操作

关于元素子节点的奇怪事件

太阳君和月亮酱

跨次元日常卖萌