三月 » 2009

学习getElementById()方法

在我为了用Color-Picker而修改它的js文件时，用到了getElementById()方法来获得自己colorPicker.js文件所在的路径。
假设在网页中插入

<script type=”text/javascript” language=”javascript” src=”js/colorPicker.js”></script>

那么如何在colorPicker.js中获得自己的路径呢？首先在<script>标签中插入一个id=“colourpicker”，如下

<script type=”text/javascript” id=”colorpicker” language=”javascript” src=”js/colorPicker.js”></script>

然后在网页中引用的colourPicker.js文件中加上

var SELF_LOCATION = document.getElementById(“colorpicker”).src;

像这样变量SELF_LOCATION就得到了colourPicker.js文件URL了，神奇吧。
其实getElementById() 方法还有很多用法……
我们来看下它的定义吧……

定义和用法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法

document.getElementById(id)

说明

HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

实例

例子 1

<html>
<head>
<script type="text/javascript">
function getValue() {
    var x=document.getElementById("myHeader")
    alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>

例子 2

getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：

function id(x) {
    if (typeof x == "string") return document.getElementById(x);
    return x;
}

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。

一款拾色器color-picker

为了修改一个主题的后台，在网上寻觅了很久，最终在几款拾色器的比较下，选择了这款拾色器。最主要的原因还是使用起来比较简单吧。

话不多说先看下截图吧或点这里看一下演示

然后color-picker可以实现什么效果呢，它可以在点击一个输入框时弹出拾色器，然后你就可以通过鼠标来选择你喜欢的颜色，并传值给输入框。

例如：

请用鼠标点上面这个输入框,我想效果还是不错的

使用方法：

1.在页面的<head>标签中插入colorPicker.js和colorPicker.css文件：

<script type=”text/javascript” id=”colorpicker” language=”javascript” src=”js/colorPicker.js”></script>
<link rel=”stylesheet” href=”css/colorPicker.css” type=”text/css”></link>

2.在你的输入框<input>标签中插入onclick=”startColorPicker(this)” onkeyup=”maskedHex(this)”

<input type=”text” id=”bau” onclick=”startColorPicker(this)” onkeyup=”maskedHex(this)”>

我在使用过程中发现color-picker不能显示images中图片，就像下面

当我看了源文件colorPicker.js后发现它是通过JavaScript来调用images中的图片的，而不是通过css来贴图上去的。由于在自己电脑上直接运行是正常的，但放到主题里时就出现上述现象了，所以应该是js里图片路径问题。最后还是花了不少的时间来读懂colorPicker.js文件，并修改的适应更好了。

主要是把

// A few configuration settings
var CROSSHAIRS_LOCATION = ‘images/crosshairs.png’;
var HUE_SLIDER_LOCATION = ‘images/h.png’;
var HUE_SLIDER_ARROWS_LOCATION = ‘images/position.png’;
var SAT_VAL_SQUARE_LOCATION = ‘images/sv.png’;
var BUTON_CLOSE_LOCATION = ‘images/close.jpg’;

改为

var SELF_RELATIVE_PATH_LENGTH = 17 ;
var SELF_LOCATION = document.getElementById(“colorpicker”).src;
var SELF_FOLDER_LOCATION = SELF_LOCATION.substring(0,SELF_LOCATION.length – SELF_RELATIVE_PATH_LENGTH );

// A few configuration settings
var CROSSHAIRS_LOCATION = SELF_FOLDER_LOCATION + ‘images/crosshairs.png’;
var HUE_SLIDER_LOCATION = SELF_FOLDER_LOCATION + ‘images/h.png’;
var HUE_SLIDER_ARROWS_LOCATION = SELF_FOLDER_LOCATION + ‘images/position.png’;
var SAT_VAL_SQUARE_LOCATION = SELF_FOLDER_LOCATION + ‘images/sv.png’;
var BUTON_CLOSE_LOCATION = SELF_FOLDER_LOCATION + ‘images/close.jpg’;