var len = document.getElementsByClassName("c2");
var size = 18;
for (var i = 0; i < len.length; i++) {
var fontLen = len[i].innerHTML.length;
for (size = 18; size > 8; size--) {
if (size * fontLen < len[i].offsetWidth || size == 9) {
len[i].style.fontSize= size+"px" ;
break
}
}
}
<div class="cont">
<div class="c2" id="str">我是文文</div>
<div class="c2" id="str">文字无痕变小,漂亮的文文啊</div>
<div class="c2" id="str">文字无痕变小,漂亮的文文啊文文文文~</div>
</div>
确定元素在页面中相对视口的位置,可采用下面这个跨浏览器的函数
function getBoundingClientRect(element) {
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if(element.getBoundingClientRect) {
//检查属性是否有定义,没有就定义一个
if(typeof arguments.callee.offset != "number") {
//创建临时元素temp,坐标位置(0,0)
var temp = document.createElement("div");
temp.style.cssText = "position: absolute;left: 0; top: 0;";
document.body.appendChild(temp);
//调用getBoundingClientRect(),减去scrollTop,防止窗口已经滚动过
arguments.callee.offset = -temp.getBoundingCilentRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
//返回各个顶点坐标
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.botom + offset
};
} else {
var actualLeft = getElementLeft(element) ;
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop +element.offsetHeight - scrollTop
}
}
}
JavaScript窗口属性
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth