js CSS操作メソッドコレクション_javascriptスキル
May 16, 2016 pm 06:59 PM
//要素の実際の最終的な CSS スタイル屬性値を取得する関數(shù)
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name] ;
}else if(elem.currentStyle){
return elem.currentStyle[name];
}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);
}else{
return null;
}
//全體に対する要素の X 位置と Y 位置を決定します。 document 補(bǔ)助位置
function pageX(elem){
return elem.offsetParent?
elem.offsetLeft pageX(elem.offsetParent):
elem.offsetLeft; function pageY(elem){
return elem.offsetParent?
elem.offsetTop pageY(elem.offsetParent):
elem.offsetTop;
}
// 要素の相対位置を決定します2 つの関數(shù)
functionparentX(elem){
return elem.parentNode == elem.offsetParent?
elem.offsetLeft:
pageX(elem)-pageX(elem.parentNode); ??> }
functionparentY(elem){
return elem.parentNode==elem.offsetParent?
elem.offsetTop:
pageY(elem)-pageY(elem.parentNode);
}
//CSS コンテナに対する相対的な要素の位置を決定します
function posX(elem){
return parseInt(getStyle(elem,"left")); ??>function posY(elem){
return parseInt(getStyle(elem, "top"));
}
//要素の x および y 位置を設(shè)定する関數(shù) (現(xiàn)在の位置とは獨(dú)立) )
function setX(elem,pos){
elem.style.left = pos "px";
}
function setY(elem,pos){
elem.style.top = pos "px";
}
// 現(xiàn)在の位置に対する要素の距離を調(diào)整する関數(shù)
function addX(elem,pos){
setX(posX(elem) pos);
}
function addY( elem,pos){
setY(posY(elem) pos)
}
//要素の現(xiàn)在の高さと幅を取得します
function getHeight(elem){
return parseInt (getStyle(elem,'height'));
function getWidth(elem){
return parseInt(getStyle(elem,'width') );
}
//要素を非表示にし、その潛在的な全高と幅をそれぞれ取得する 2 つの関數(shù)です。
function fullHeight(elem){
if(getStyle(elem,'display') !='none'){
return elem.offsetHeight||getHeight(elem);
}
var old =resetCSS(elem,{
display:'',
visibility:' hidden',
position:' 絶対'
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old); ??>}
function fullWidth(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetWidth || getWidth(elem); ??>}
var old =resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
}); = elem.clientWidth || getWidth(elem );
restoreCSS(elem,old);
function restartCSS(elem,prop){
var old = []; for( var i in prop){
old[i] = elem.style[i];
elem.style[i] = prop[i]; ??>古いものを返す;
}
関數(shù)リストアCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
// CSS の表示プロパティを使用して要素の表示/非表示を切り替える一連の関數(shù)
function Hide(elem){
var curDisplay = getStyle(elem,'display');
if(curDisplay != 'none') {
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none'; elem){
elem.style.display = elem.$oldDisplay ||'';
}
//要素の透明度を設(shè)定します
function setOpacity(elem,level){
if(elem.filters){
elem .style.filters = 'alpha(opacity=' level ')';
}else{
elem.style.opacity = level/100; ??>}
}
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國(guó)語版
中國(guó)語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1793
16
1736
56
1588
29
267
587
120
836
CSSを使用して応答性のある畫像を作成する方法は？
Jul 15, 2025 am 01:10 AM
CSSを使用してレスポンシブ畫像を作成するには、主に次の方法で達(dá)成できます。1。最大幅を使用してください：100％と高さ：自動(dòng)化して、割合を維持しながら畫像がコンテナ幅に適応できるようにします。 2。HTMLのSRCSETおよびサイズの屬性を使用して、異なる畫面に適合した畫像ソースをインテリジェントにロードします。 3.オブジェクトフィットとオブジェクトポジションを使用して、畫像のトリミングとフォーカスディスプレイを制御します。一緒に、これらの方法により、畫像がさまざまなデバイスで明確かつ美しく表示されるようになります。
CSSのプロパティ継承を説明します
Jul 15, 2025 am 01:25 AM
Incss、PropertyInheritanceAffectShowStyLESAREPASSEDED FROMPARENTELEMENTSTOCHILDREN.SOMEPROPERTIESLIKECOLORANDFONT-FAMILYININTBYDEFAULT。
`：has（）` pseudo-class（parent selector）を説明する
Jul 15, 2025 am 12:32 AM
：has has（）pseudo-classincsSallowStargetingAparentelementBasedOnitsChildElements.itworksbyusingthesyntaxparent：has has has has（child-selector）toapplystylescample、forexample、div：appliestytylestoadianmage.multelectorectorscomma
「不透明度」プロパティを説明してください
Jul 15, 2025 am 01:23 AM
不透明度は、0（完全に透明）から1（完全に不透明）の範(fàn)囲の値を持つ、要素の全體的な透明性を制御するCSSの屬性です。 1.イメージホバーフェード効果によく使用され、不透明な遷移を設(shè)定することでインタラクティブエクスペリエンスを強(qiáng)化します。 2。テキストの読みやすさを改善するための背景マスクレイヤーを作成します。 3.障害狀態(tài)のコントロールボタンまたはアイコンの視覚的フィードバック。指定された色部分のみに影響するRGBAとは異なり、すべての子供要素に影響を與えることに注意してください。スムーズなアニメーションは移行とともに実現(xiàn)できますが、頻繁に使用するとパフォーマンスに影響を與える可能性があります。 Will-ChangeまたはTransformと組み合わせて使用することをお?jiǎng)幛幛筏蓼埂２煌该鞫趣蚝侠淼膜诉m用すると、ページの階層と対話性が向上しますが、ユーザーとの干渉を避ける必要があります。
選択をスタイリングする方法ハイライト（ `:: selection`）？
Jul 16, 2025 am 12:50 AM
CSSの::選択擬似要素を使用して、ページの美學(xué)と統(tǒng)一性を改善するためにWebページテキストを選択したときにハイライトスタイルをカスタマイズします。 1.基本設(shè)定：:: ::選択の背景と色を定義します。 P ::選択などの特定の要素も制限できます。 2。互換性処理：Safariおよびモバイルブラウザーと互換性がある-WebKit -Prefixを追加すると、FirefoxとEdgeの標(biāo)準(zhǔn)が十分にサポートされています。 3.読みやすさに注意してください：過度の色のコントラストや派手なほど避け、全體的な設(shè)計(jì)と調(diào)整する必要があります。たとえば、視覚的な快適さを改善するために、暗いモードのソフトブルーベースを選択します。合理的な使用は、インターフェイスのテクスチャを強(qiáng)化し、詳細(xì)を無視することができます
「ワードブレイク」と「ワードラップ」プロパティを説明してください
Jul 16, 2025 am 02:08 AM
ワードブレイクとオーバーフローラップ（以前のワードラップ）は、長(zhǎng)い単語や壊れないコンテンツを扱うときに異なって行います。 1.ワードブレイクコントロールブロック要素で単語の線を壊す方法、壊れる長(zhǎng)い言葉を破る、壊れないようにする方法は、中國(guó)語、日本、韓國(guó)のテキストに適しています。 2。オーバーフローをオーバーフローする場(chǎng)合、必要に応じて長(zhǎng)い単語を切斷します。 3。使用法のシナリオでは、ワードブレイク：コードにbreak-allを使用し、オーバーフローラップ：ユーザーコメントに分割ワードを使用します。 4.ブラウザの互換性とさまざまなモバイル動(dòng)作の違いに注意してください
単一の要素で複數(shù)の背景畫像をどのように使用しますか？
Jul 15, 2025 am 12:59 AM
CSSの要素の複數(shù)の背景畫像を設(shè)定する鍵は、コンマ分離と屬性順序を正しく使用することです。 1.バックグラウンドイメージ屬性を使用し、コンマを使用して複數(shù)の畫像アドレスを分離します。最初の畫像は最上層に表示されます。 2。各畫像の表示方法を制御するために、背景回答、背景ポジション、およびその他の屬性を使用し、各屬性の値は各畫像に順番に対応します。 3.背景の略語屬性を使用して、すべてのパラメーターを一度に定義して、コードの読みやすさとメンテナンスを改善することもできます。 4.実際のアプリケーションには、ボタンとアイコン、裝飾的な境界線、ページタイトルバー、その他のエフェクトが含まれます。順序と屬性の間の対応する関係をマスターし、それらを柔軟に使用できます。
段落の最初の文字または最初の行をスタイリングする方法は？
Jul 19, 2025 am 02:58 AM
視覚的魅力を強(qiáng)化するために段落の始まりを美化するために、一般的な慣行は、CSSの擬似要素を使用するか、ドキュメントを手動(dòng)でスタイリングすることです。 Web開発では、P :: First-Letterを使用して、拡大、太字、変色などの最初の文字スタイルを設(shè)定できますが、ブロックレベルの要素にのみ適していることに注意してください。最初の行全體を強(qiáng)調(diào)表示したい場(chǎng)合は、P :: First-Lineを使用してスタイルを追加します。 Wordなどのドキュメントソフトウェアでは、最初の文字形式を手動(dòng)で調(diào)整したり、スタイルテンプレートを作成したりすることができます。Indesignには、公開やデザインに適した「ファーストシンク」機(jī)能が組み込まれています。適用するときは、読み取りに影響を與える複雑なスタイルを避け、互換性とフォーマットの一貫性を確保するなど、詳細(xì)に注意を払う必要があります。
