Question

用Js控制CSS中textarea宽度

假定CSS中我textarea是这么写的

textarea{
width:320px;
}

我现在觉得这样固定死宽度不好，又觉得用mx-width兼容性不好，想用Js控制textarea的宽度，要求是用Js获取浏览器宽度和高度（换个意思说就是浏览器可视区域），如果宽度小于高度，就将textarea的宽度改为240px; 反之当宽度大于高度或者等于时，textarea宽度为520px;怎么写呢？我需要实时获取实时改变。就是说我人为拉长浏览器不刷新页面textarea也会改变。

Answer 1

function windowSize(){
	if($(window).width()<$(window).height()){
		$("textarea").css("width","240px");
	}
	else{
		$("textarea").css("width","520px");
	}
}
$(document).ready(function(e) {
	windowSize();
	$(window).on({
		"resize":function(){
			windowSize();
		}
	}) 
});

这是JQ写法，你要不会我再改成原生JS写法。

追问

改成原生的吧，感谢～～

追答

function windowSize(){
var widthVal="520px";
if(window.innerWidth<window.innerHeight){
widthVal="240px";
}
for(var i=0;i<document.getElementsByTagName("textarea").length;i++){
document.getElementsByTagName("textarea").item(i).style.width=widthVal;
}
}
window.onload=function(){
windowSize();
window.onresize=function(){
windowSize();
}
}

这是原生JS的写法，但注意一下有可能对某些浏览器不兼容，我这只有IE9和谷歌，其他浏览器没测试。

用JQ不会出现兼容的问题。