ホームページ >ウェブフロントエンド >jsチュートリアル >Mootools 1.2 チュートリアルの設定とスタイルシートの取得properties_Mootools

Mootools 1.2 チュートリアルの設定とスタイルシートの取得properties_Mootools

WBOYオリジナル: 2016-05-16 18:46:33938ブラウズ

このシリーズの 7 番目のチュートリアルへようこそ。今日は、MooTools 1.2 でスタイルを操作する方法と、これまでの講義で学んだ内容を見ていきます。これにより、UI をより詳細に制御できるようになります。スタイルの操作は非常に簡単ですが、今日はいくつかの調整を加えてみましょう。たとえば、キーと値のペアのオブジェクトを導入します。関数についてのレッスンで学んだのと同じように、domready の外部で変数を渡すことについても説明します。ここからは徐々に難易度を上げていき、必要なプログラミングの概念をいくつか紹介していきます。 JavaScript を初めて使用する場合、または MooTools を初めて学習する場合は、前のチュートリアルを必ず理解してから、お気軽に質問してください。
基本メソッド
.setStyle();
この関数を使用すると、要素のスタイル属性を設定できます。これは、以前のいくつかの例ですでに使用しました。これをセレクターの後に置くだけで、要素のスタイルプロパティが変更されます。
参照コード:

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

// 定義任意の Container
// .setStyle メソッドを追加します
// スタイル属性と値を指定します
$('body_wrap').setStyle('background-color', '#eeeeee'); $( '.class_name').setStyle('background-color', '#eeeeee'); 

参照コード:

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

/div>

.getStyle();

このメソッドも、文字通りの動作をします。 .getStyle(); は要素の属性値を返します。
参照コード:

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

// 最初に、このスタイル属性値を保持する変数を作成します

var styleValue = $('body_wrap').getStyle('background-color'); 

上記の例でこのコードを実行すると、 , すると、変数styleValueに「#eeeeee」が返されます。

複数のスタイルシート属性を設定および取得する
.setStyles();
.setStyles(); ご想像のとおり、これを使用すると、要素または要素の配列に一度の値で複数の属性を設定できます。。複数のスタイルシートプロパティ値を同時に設定できるようにするために、.setStyles(); の構文が少し異なります。
参照コード:
// 引き続きセレクターから開始し、次に .setStyles({

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

$('body_wrap').setStyles({

// 次の形式は次のとおりです: 'property': 'value', 
'width' : '1000px', 
'height': '1000px', 
// 特記事項: 最後の属性にはカンマがありません 
// カンマがある場合、ブラウザ間では機能しません 
'background-color ': '#eeeeee' 
}); 


注: 実際、属性セレクターには、コネクター「-」がない限り、単一引用符は必要ありません。 " "background-color" などの属性名を単純にするために、各属性セレクターを一重引用符で囲む方が簡単です。

また、注: 属性値はより柔軟な場合があります ("100px" や "100px" など)。 "#eeeeee ") 文字列 (文字だけの文字列。これについては今後のチュートリアルで詳しく説明します) に加えて、数値 (おそらくほとんどの場合 px として解釈されます) または変数を渡すこともできます。引用符は必要ありません:
参照コード:

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

// これにより、変数 firstBackgroundColor の値が文字列 (STRING) '#eeeeee' に設定されます 
var firstBackgroundColor = '#eeeeee'; 
// 1 つの変数を別の変数に渡すことができます
 // これにより、変数 backgroundColor の値が文字列 (string) '#eeeeee' と等しくなります。 
var backgroundColor = firstBackgroundColor 
// これにより、変数 divWidth の値が数値 (NUMBER) に設定されます。 ) 500 
var divWidth = 500; 
$('body_wrap').setStyles({ 
// この場合、変数名を引用符で囲む必要はありません 
'width': divWidth, 
// 数値についても同様で、引用符で囲む必要はありません 
'height': 1000, 
// 別の変数 
'background-color': backgroundColor, 
 // 使用される文字列 一重引用符で囲まれた一連の文字で構成される文字列 
'color': 'black' 
}); >このメソッドを使用すると、複数のスタイル プロパティを取得できます。これは上で見たものとは少し異なります。複数のデータ セットが含まれており、各データ セットにはキー (キー、属性名) と値 (値、属性値) があります。このデータセットはオブジェクトと呼ばれ、.getStyles(); メソッドを使用すると、複数のプロパティ値をこれらのオブジェクトに簡単に入力し、それらを簡単に取得できます。 
参照コード: 

コードをコピー

コードは次のとおりです: // 最初にオブジェクトに対して変数を定義します // 次に、セレクターを作成します

// 次に、.getStyles をセレクターに追加します

// 次に、スタイル プロパティのカンマ区切りリストを作成します 
// 各属性を確認します
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 
// まず、この属性値を保存するオブジェクトを作成します。 
// 次に、指定された属性の名前 (キー) によって値を取得します
// 属性名を 2 つの角括弧で囲みます []
// そして、プロパティ名が単一の括弧で囲まれていることを確認してくださいquotes 
var bgStyle = bodyStyles['background-color']; 


CSS ファイルにこのスタイル定義がある場合: 
 参照コード: 

コードをコピーします

コードは次のとおりです: #body_wrap { width: 1000px

height: 1000px;

background-color: #eeeeee; 
} 


変数 bgStyle には値「#eeeeee」が含まれます。 
注: スタイルシート オブジェクトから個々のプロパティを取得したい場合は、最初にオブジェクト変数 (この場合は「bodyStyles」) を取得し、次に角括弧と一重引用符 (['']) を使用して、最後に値を入力します。属性名のキー (幅や背景色など)。それはとても簡単です！ 
コード例 

この例では、上で学んだメソッドのいくつかを使用してスタイルを取得および設定します。スタイル属性操作の使用法に注意を払う一方で、それ自体の構造にも特別な注意を払う必要があります。関数を domready から分離するには、これらの変数を domready イベント関数に渡す必要があります。これを行うには、domready の関数にパラメータを渡します。 click イベントは匿名メソッドを使用していることに注意してください。これにより、domready イベントから外部関数に変数を渡すことができます。初めて理解できなくても、心配しないでください。次の例でわかりやすくなります。
リファレンスコード:

コードをコピー

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

// ここにいくつかの関数があります 
// この関数にはパラメータが 1 つあることに注意してください: "bgColor" 
// これは domready イベントから渡されます 
var seeBgColor = function(bgColor ) { 
alert(bgColor); 
} 
var seeBorderColor = function(borderColor) { 
alert(borderColor); 
} 
// この関数に playDiv を渡します。この要素を操作することができます 
// また、セレクターの繰り返しの使用を避けることもできます 
// これは、複雑なセレクターを扱うときに便利です 
var seeDivWidth = function(playDiv) { 
// 開始しますスタイルプロパティを再度取得します 
// domready で使用した getStyles とは独立して 
// 現在の値を使用したいため 
// これにより、幅が正確に保たれます 
/ / domready イベント後に変更されました 
var currentDivWidth = playDiv.getStyle('width'); 
alert(currentDivWidth); 
var seeDivHeight = function(playDiv) { 
var currentDivHeight = playDiv .getStyle('height'); 
alert(currentDivHeight); 
var setDivWidth = function(playDiv) { 
playDiv.setStyle('width', '50px' ); } 
var setDivHeight = function(playDiv) { 
playDiv.setStyle('height', '50px'); 
} 
// この時点では、この変数には任意の名前を付けることができることに注意してください。 
// 任意の値、値、要素、またはあなたのものを渡します
// domready で渡されたものを置き換えます
var replaceSIze = function(foo) { 
foo.setStyles({ 
'height': 200, 
'width': 200 
}); 
} 
window.addEvent('domready', function() { 
// する必要があるためこのセレクターを複数回使用する場合は、それを変数に割り当てます 
var playDiv = $('playstyles'); 
// ここでは、属性 
var bodyStyles = playDiv のオブジェクトをいくつか含む変数を作成します。 getStyles('background-color', 'border-bottom-color'); 
// 属性名を呼び出してスタイル値を取得し、それを変数に渡すことができます 
var bgColor = bodyStyles['background -color']; 
// ここでは、domready の外側の関数にパラメータを渡すことができるように、匿名関数を使用します。 
$('bgcolor').addEvent(' click', function(){ 
 seeBgColor(bgColor); 
}); 
$('border_color').addEvent('click', function(){ 
// 追加に加えて、スタイル属性が変数 // ここで直接呼び出すこともできます 
seeBorderColor(bodyStyles['border-bottom-color']) 
}); (){ 
seeDivWidth(playDiv); 
}); 
$('div_height').addEvent('click', function(){ 
seeDivHeight( playDiv); 
}) ; 
$('set_width').addEvent('click', function(){ 
setDivWidth(playDiv); 
}); , function(){ 
setDivHeight(playDiv); 
}); 
$('reset').addEvent('click', function(){ 
resetSIze(playDiv); 
 }); 
}); 


HTML コードは次のとおりです: 
参照コード: 