实际落实,javascript克隆成分样式的兑今世码

率先clone二个DOM,设置position:absolute,然后设置top为两个比十分的大的负值,然后使其出示出来,最后收获到了DOM的宽高后,将其remove。
实际代码如下:
Js代码

三个藏身的DOM是获得不到宽高的,假使想要获取,选用下边包车型地铁点子:

复制代码 代码如下:

复制代码 代码如下:

第一clone四个DOM,设置position:absolute,然后设置top为一个相当的大的负值,然后使其出示出来,最终取获得了DOM的宽高后,将其remove。

/**
* 克隆成分样式
* @param {HTMLElement} 被克隆的成分
* @param {Boolean} 是或不是启用缓存(暗中同意true)
* @return {String} css类名
*/
var cloneStyle = (function (doc) {
var rstyle = /^(number|string)$/,
实际落实,javascript克隆成分样式的兑今世码。cloneName = ‘${cloneName}’,
sData = {},
addHeadStyle = function (content) {
var style = sData[doc];
if (!style) {
style = sData[doc] = doc.createElement(‘style’);
doc.getElementsByTagName(‘head’)[0].appendChild(style);
};
style.styleSheet && (style.styleSheet.cssText += content) ||
style.appendChild(doc.createTextNode(content));
},
getStyle = ‘getComputedStyle’ in window ? function (elem, name) {
return getComputedStyle(elem, null)[name];
} : function (elem, name) {
return elem.currentStyle[name];
};
return function (source, cache) {
if (!cache && source[cloneName]) return source[cloneName];
var className, name,
cssText = [],
sStyle = source.style;
for (name in sStyle) {
val = getStyle(source, name);
if (val !== ” && rstyle.test(typeof val)) {
name = name.replace(/([A-Z])/g,”-$1″).toLowerCase();
cssText.push(name);
cssText.push(‘:’);
cssText.push(val);
cssText.push(‘;’);
};
};
cssText = cssText.join(”);
source[cloneName] = className = ‘clone’ + (new Date).getTime();
addHeadStyle(‘.’ + className + ‘{‘ + cssText + ‘}’);
return className;
};
}(document));

function getCss(elem, css){ 
 if (window.getComputedStyle) { 
  return window.getComputedStyle(elem, null)[css]; 
 }else if (elem.currentStyle) { 
  return elem.currentStyle[css]; 
 }else { 
  return elem.style[css]; 
 } 

function getWH(dom){ 
 var get = function(elem){ 
实际落实,javascript克隆成分样式的兑今世码。  var wh = {}; 
  ‘Width Height’.replace(/[^ ]+/g, function(i){ 
   var a = i.toLowerCase(); 
   wh[a] = elem[‘offset’ + i] || elem[‘client’ + i]; 
  }); 
  return wh; 
 }; 
 if (getCss(dom, ‘display’) === ‘none’) { 
  var nDom = dom.cloneNode(true); 
  nDom.style.position = ‘absolute’; 
  nDom.style.top = ‘-3000px’; 
  nDom.style.display = ‘block’; 
  document.getElementsByTagName(‘body’)[0].appendChild(nDom); 
  var wh = get(nDom); 
  nDom.parentNode.removeChild(nDom); 
  return wh; 
 }  
 return get(dom); 

//test  
console.log(getWH(document.getElementById(‘content’))); 
var domA = document.createElement(“a”), _ostyle =
“position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;”; 
domA.setAttribute(“style”, _ostyle); 
domA.style.cssText = _ostyle; 
domA.setAttribute(“href”, “javascript:void(0);”); 
document.getElementsByTagName(‘body’)[0].appendChild(o); 
console.log(getWH(domA));
function getCss(elem, css){
 if (window.getComputedStyle) {
  return window.getComputedStyle(elem, null)[css];
 }else if (elem.currentStyle) {
  return elem.currentStyle[css];
 }else {
  return elem.style[css];
 }
}
function getWH(dom){
 var get = function(elem){
  var wh = {};
  ‘Width Height’.replace(/[^ ]+/g, function(i){
   var a = i.toLowerCase();
   wh[a] = elem[‘offset’ + i] || elem[‘client’ + i];
  });
  return wh;
 };
 if (getCss(dom, ‘display’) === ‘none’) {
  var nDom = dom.cloneNode(true);
  nDom.style.position = ‘absolute’;
  nDom.style.top = ‘-3000px’;
  nDom.style.display = ‘block’;
  document.getElementsByTagName(‘body’)[0].appendChild(nDom);
  var wh = get(nDom);
  nDom.parentNode.removeChild(nDom);
  return wh;
 }
 return get(dom);
}
//test
console.log(getWH(document.getElementById(‘content’)));
var domA = document.createElement(“a”), _ostyle =
“position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;”;
domA.setAttribute(“style”, _ostyle);
domA.style.cssText = _ostyle;
domA.setAttribute(“href”, “javascript:void(0);”);
document.getElementsByTagName(‘body’)[0].appendChild(o);
console.log(getWH(domA));

皇家赌场手机版,实际代码如下:

演示:

还会有其它更加好的秘诀应接提议来。

Copy to
Clipboard皇家赌场手机版 1援引的内容:[www.bkjia.com]
function getCss(elem, css){
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
}else if (elem.currentStyle) {
return elem.currentStyle[css];
}else {
return elem.style[css];
}
}
function getWH(dom){
var get = function(elem){
var wh = {};
‘Width Height’.replace(/[^ ]+/g, function(i){
var a = i.toLowerCase();
wh[a] = elem[‘offset’ + i] || elem[‘client’ + i];
});
return wh;
};
if (getCss(dom, ‘display’) === ‘none’) {
var nDom = dom.cloneNode(true);
nDom.style.position = ‘absolute’;
nDom.style.top = ‘-3000px’;
nDom.style.display = ‘block’;
document.getElementsByTagName(‘body’)[0].appendChild(nDom);
var wh = get(nDom);
nDom.parentNode.removeChild(nDom);
return wh;
}
return get(dom);
}
//test
console.log(getWH(document.getElementById(‘content’)));
var domA = document.createElement(“a”), _ostyle =
“position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;”;
domA.setAttribute(“style”, _ostyle);
domA.style.cssText = _ostyle;
domA.setAttribute(“href”, “javascript:void(0);”);
document.getElementsByTagName(‘body’)[0].appendChild(o);
console.log(getWH(domA));

cloneStyle

您恐怕感兴趣的小说:

  • JS上传图片前的限制包罗(jpg jpg
    gif及大小高宽)等
  • Js获取图片原始宽高的贯彻代码
  • js判定图片加载成功后获得图片实际宽高的艺术
  • javascript落实网页中涉及的简单运动(改造宽高、反射率、地点)
  • js获取图片宽高的点子
  • 纯js代码达成未知宽高的因素在钦定成分中垂直水平居中显得
  • javascript得到网页宽高方法汇总
  • 原生js获取宽高与jquery获取宽高的法子关系相比较
  • JS
    获取浏览器和荧屏宽高端信息代码
  • javascript窗口宽高,鼠标地方,滚动高度(详细剖判)
  • JS获取图片实际宽高及基于图片大小进行自适应
  • JS
    获取浏览器和显示屏宽高级消息的达成思路及代码
  • js
    获取荧屏各样宽高的主意(浏览器包容)
  • 动态改换textbox的宽高的js
  • JS获取IMG图片高宽的简约实例

还会有其它更加好的法子招待提议来。

克隆div的最后样式到span

本文来源:

我是DIV标签

首先clone一个DOM,设置position:absolute,然后设置top为三个非常的大的负值…

我是SPAN标签

[Ctrl+A 全选
注:如需引进外界Js需刷新技术施行]

您只怕感兴趣的稿子:

  • JS获取和改产生分样式的实例代码
  • 原生js获取成分样式的简短方法
  • 原生javascript获取成分样式
  • 使用原生JavaScript获取成分样式只是赢得而已
  • javascript
    获取元素样式必杀技
  • JavaScript修改css样式style动态改动成分样式
  • 原生javascript获取成分样式属性值的格局
  • js准确获取成分样式详解
  • JS怎么样设置成分样式的法门自己要作为模范遵守规则

Leave a Comment.