LYNX

Links

Tags

Categories

html笔记

<canvas>放缩及调整位置

<canvas id = "canvas" width = "300" height = "300" style = "width:200px; height:200px; left:60px"></canvas>

表格固定宽度

<style>
table
th:first-of-type {width: 200px;}
th:nth-of-type(2) {width: 200px;}
</style>

表格自适应宽度

<script>
window.onresize = my_resize;
window.onload = my_resize;
function my_resize(){
var x = window.innerWidth;
sheet = document.getElementById('my_table').sheet;
if (window.innerWidth < 950){
sheet.addRule('table th:first-of-type, table th:nth-of-type(2)',
'width: ' + x/7 + 'px;');
}else{
sheet.addRule('table th:first-of-type, table th:nth-of-type(2)',
'width: ' + x/15 + 'px;');
}
}
</script>

js修改css

document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);

参考
w3plus

元素里面的文字也算子节点

js提取元素

div大小放缩示例

<head>
<script type="text/javascript">
function mouse() {
var direct = 0;
e = window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
change(1);
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
change(-1);
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
change(1);
}
if (e.detail < 0) { //当滑轮向下滚动时
change(-1);
}
}
}

function change(num) {
var b1 = document.getElementById('b1');
var bit = b1.width/b1.height;
if (num == 1) {
b1.src = "/i/eg_mouse.jpg";
b1.width += 2*bit;
b1.height += 2;
if (b1.style.left == "") {
b1.style.left = "-" + bit + "px";
b1.style.top = "-1px";
} else {
var temp = (Number(b1.style.left.replace(/px/, "")) - 1*bit).toString() + "px";
// 注意toString加括号
b1.style.left = temp;
var temp = (Number(b1.style.top.replace(/px/, "")) - 1).toString() + "px";
b1.style.top = temp;
}
} else {
b1.src = "/i/eg_mouse2.jpg"
b1.width -= 2*bit;
b1.height -= 2;
if (b1.style.left == "") {
b1.style.left = bit + "px";
b1.style.top = "1px";
} else {
var temp = (Number(b1.style.left.replace(/px/, "")) + 1*bit).toString() + "px";
b1.style.left = temp;
var temp = (Number(b1.style.top.replace(/px/, "")) + 1).toString() + "px";
b1.style.top = temp;
}
}
}
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" onmousewheel="mouse()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" style="position: fixed; top: 100px; left: 100px;" width="200px" height="100px" />
<!-- 不要把width写进style -->
</a>
</body>

Tags

css

Categories

1 / 1