JS里添加样式的方法：
1、首先，要创建标签，使用documentcreateElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。
2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。
3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。
4、设置好标签（如图是div标签，变量名box），使用documentbodyappendChild添加标签到body当中。
5、标签添加以后，依然可以修改样式，如图是使用documentgetElementById方法根据id获取标签，修改style。
6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。
在父窗口中获取iframe中的元素
1、
格式：windowframes["iframe的name值"]documentgetElementByIdx_x("iframe中控件的ID")click();
实例：windowframes["ifm"]documentgetElementByIdx_x("btnOk")click();
2、
格式：
var obj=documentgetElementByIdx_x("iframe的name")contentWindow;
var ifmObj=objdocumentgetElementByIdx_x("iframe中控件的ID");
ifmObjclick();
实例：
var obj=documentgetElementByIdx_x("ifm")contentWindow;
var ifmObj=objdocumentgetElementByIdx_x("btnOk");
ifmObjclick();
在iframe中获取父窗口的元素
格式：windowparentdocumentgetElementByIdx_x("父窗口的元素ID")click();
实例：windowparentdocumentgetElementByIdx_x("btnOk")click();
jquery
在父窗口中获取iframe中的元素
1、
格式：$("#iframe的ID")contents()find("#iframe中的控件ID")click();//jquery 方法1
实例：$("#ifm")contents()find("#btnOk")click();//jquery 方法1
2、
格式：$("#iframe中的控件ID",documentframes("frame的name")document)click();//jquery 方法2
实例：$("#btnOk",documentframes("ifm")document)click();//jquery 方法2
在iframe中获取父窗口的元素
格式：$('#父窗口中的元素ID', parentdocument)click();
实例：$('#btnOk', parentdocument)click();
父窗获取子窗口的IFrame中的JS方法
一、父窗口调用iframe子窗口方法
1、HTML语法：<iframe name="myFrame" src="childhtml"></iframe>
2、父窗口调用子窗口：myFramewindowfunctionName();
3、子窗品调用父窗口：parentfunctionName();
简单地说,也就是在子窗口中调用的变量或函数前加个parent就行
4、父窗口页面源码：
复制代码代码如下:
<html>
<head>
<script type="text/javascript">
function say() {
alert("parenthtml------>I'm at parenthtml");
}
function callChild()
{
//documentframes("myFrame")f1();
myFramewindowsay();
}
</script>
</head>
<body>
<input type=button value="调用childhtml中的函数say()" onclick="callChild()">
<iframe name="myFrame" src="childhtml"></iframe>
</body>
</html>
5、子窗口页面：
复制代码代码如下:
<html>
<head>
<script type="text/javascript">
function say()
{
alert("childhtml--->I'm at childhtml");
}
function callParent() {
parentsay();
}
</script>
</head>
<body>
<input type=button value="调用parenthtml中的say()函数" onclick="callParent()">
</body>
</html>
二、iframe 父窗口和子窗口相互的调用方法
1、IE中使用方法：
父窗口调用子窗口：iframe_IDiframe_document_objectobject_attribute = attribute_value
例子：onClick="iframe_textmyH1innerText='>
定义一个id="flower"的div元素 并设置如上样式，目标就是通过javascript来获取样式的最终属性 ；
<div id="flower" ></div>
getStyle函数:
这里用到了三个原型扩展
Stringprototypecapitalize 这个方法是让字符串首字母大写
Arrayprototypecontains 判断数组中是否有指定成员
Stringprototypecamelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式。
ss文件中如何得到某个属性值：
一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，
返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器;
语法：var style=windowgetComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。
二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值，
利用elementCurrentStyleattribute可获取
其与getComputedStyle区别：1、 currentStyle不支持伪类样式获取；
2、currentStyle不支持现代浏览器，支持IE
代码说明：
[html] view plain copy
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div1{
width:100px;height:100px;background: red;
}
</style>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
var oDiv = documentgetElementById('div1');
/
只能获取，不能设置
获取到的是计算后的样式
最好不要获取复合样式
所获取的样式要设初使值
获取到的样式类型是字符串
别空格 [' width']
获取到的样式带px的
transform 获取不到
transition 不准确
/
function getStyle(obj,attr){
if(objcurrentStyle){ //IE
return objcurrentStyle[attr];
}else{
return getComputedStyle(obj,"伪类")[attr]; //Firefox
}
}
alert(getStyle(oDiv1,'background'));</html></span>
改成w=woffsetWidth;
js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。
小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。
现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。
以上就是关于JS里添加样式全部的内容，包括:JS里添加样式、js获取iframe 然后 *** 作--》点击iframe的document或body的时候，修改父窗体的样式、如何通过js获取style里面的所有样式信息啊等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）