iphone web 开发[5/12]——针对方向的样式表

来源:转载

现在让我们给 方向变化 事件更实际的用法。有时你可能需要用样式表来作依赖于方向的内容格式化。所有只要简单三步:

  1. 给 body 元素标签添加类名(portrait[ 竖直的]和 landscape[横向的] 这两个名字很合适!)
  2. 在样式表中,分别为 body.portrait 和 body.landscape 编写不同内容样式表,任何后代元素样式可能都要用到它
  3. 使用 JavaScript 在方向变化时更新 body 元素的 class 属性

所以,第一步是添加一个默认 class 名,像这样:

<body class="portrait">

然后,添加样式:

body.portrait p{ color:red;}body.landscape p{ color:blue;}

最后,有关 JavaScript。我们要这样使用:

  1. 使用 load 事件的侦听器来初始化设置类名
  2. 对 orientationchange 事件使用另一个侦听器
  3. 一个在 orientationchange 事件发生时,替换类名的函数

下面是设置侦听器:

window.addEventListener('load', setOrientation, false);window.addEventListener('orientationchange', setOrientation, false);

这里 setOrientation 函数是用来改变 body 元素的类名的:

function setOrientation() { var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; var cl = document.body.className; cl = cl.replace(/portrait|landscape/, orient); document.body.className = cl;}

例 8 显示了这些基于方向的样式。

分享给朋友:
您可能感兴趣的文章:
随机阅读: