よく使うJavaScriptスクリプトまとめ(3)_javascriptスキル

配列を介して文字列のスプライスを拡張すると、簡単にパフォーマンスの問題が発生する可能性があります

コードをコピーします コードは次のとおりです:

function StringBuffer() {
This.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
This.__strings__.push(str);
これを返してください;
}
StringBuffer.prototype.toString = function () {
this.__strings__.join("");
を返します。 }
varbuffer = new StringBuffer();
buffer.append("Hello ").append("javascript");
var result =buffer.toString();
アラート(結果); // こんにちは javascript

コードソース: https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

ページビューポートのスクロールバーの位置に関する補助機能

コードをコピーします コードは次のとおりです:

/*現在のページの高さと幅を決定する 2 つの関数*/
関数 pageHeight() {
document.body.scrollHeight;
を返します }
関数 pageWidth() {
document.body.scrollWidth;
を返します }
/*スクロールバーの水平位置と垂直位置を決定します*/
関数scrollX() {
var de = document.documentElement;
self.pageXOffset を返します || (de && de.scrollLeft) || }
関数scrollY() {
var de = document.documentElement;
self.pageYOffset を返します || (de && de.scrollTop) || }
/*ブラウザのビューポートの高さと幅を決定する 2 つの関数*/
関数 windowHeight() {
var de = document.documentElement;
self.innerHeight を返します || (de && de.clientHeight) || document.body.clientHeight;
}
関数 windowWidth() {
var de = document.documentElement;
self.innerWidth を返します || (de && de.clientWidth) || document.body.clientWidth;
}

コードソース: https://gist.github.com/hehongwei44/62907b9b7061d4defadb

要素の透明度を調整する関数

コードをコピーします コードは次のとおりです:

/*要素の透明度を調整する関数*/

function setOpacity(elem, level) {
//IE は透明度を処理します
If (elem.filters) {
elem.style.filters = 'alpha(opacity=' level ')';
} else {
elem.style.opacity = レベル / 100;
}
}

コードソース: https://gist.github.com/hehongwei44/87839cd3b8439aff6a3c

マウス位置を取得するためのいくつかの一般的な関数

コードをコピーします コードは次のとおりです:

/*ページ全体に対するマウスの現在位置を取得するために使用される 2 つの一般的な関数*/

関数 getX(e) {
e = e || ウィンドウ.イベント;
e.pageX || e.clientX document.body.scrollLeft;
を返す }
関数 getY(e) {
e = e || ウィンドウ.イベント;
e.pageY || e.clientY document.body.scrollTop;
を返す }
/*現在の要素に対する相対的なマウスの位置を取得する 2 つの関数*/
関数 getElementX(e) {
戻り値 (e && e.layerX) || window.event.offsetX;
}
関数 getElementY(e) {
戻り値 (e && e.layerY) || window.event.offsetY;
}

コードソース: https://gist.github.com/hehongwei44/2732365bd42baa491ef8

cssdisplay 属性を使用して要素の表示/非表示を切り替える一連の関数

コードをコピー コードは次のとおりです:

/**
* Use display to hide elements
**/
function hide(elem) {
var curDisplay = getStyle(elem, 'display');

if (curDisplay != 'none') {
          elem.$oldDisplay = curDisplay;
}
elem.style.display = 'none';
}
/**
* Use display to display the function of elements
**/
function show(elem) {
elem.style.display = elem.$oldDisplay || '';
}

Code source: https://gist.github.com/hehongwei44/b4192af8227d756bfda6

General functions related to style

Copy code The code is as follows:

/**
* Get the style attribute (name) of the specified element (elem)
**/
function getStyle(elem, name) {
//If it exists in style[], then it has been set (and is current)
If (elem.style[name]) {
           return elem.style[name];
}
//Otherwise, how to test IE
else if (elem.currentStyle) {
           return elem.currentStyle[name];
}
//Or W3C method
​ else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/(A-Z)/g, "-$1");
          name = name.toLowerCase();
          var s = document.defaultView.getComputedStyle(elem, "");
          return s && s.getPropertyValue(name);
}
//Otherwise, the user is using another browser
else {
        return null;
}
}

Code source: https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7

Get the current height and width of the element

Copy code The code is as follows:

/**
* Get the true height of the element
* See the above function for dependent getStyle.
**/
function getHeight(elem) {
Return parseInt(getStyle(elem, 'height'));
}
/**
* Get the real width of the element
* For the dependent getStyle, see the function above
**/
function getWidth(elem) {
Return parseInt(getStyle(elem, 'width'));
}

Code source: https://gist.github.com/hehongwei44/b524ff25991d99625eb2

The above are the commonly used JavaScript scripts shared in this article. I hope you all like them.