jqでCSSスタイルを設定する方法-jsチュートリアル-php.cn

jqでCSSスタイルを設定する方法

青灯夜游

リリース： 2023-01-05 16:08:04

オリジナル

14870 人が閲覧しました

css() メソッドを jquery で使用して、CSS スタイルを設定できます。 css() メソッドは、選択した要素に対して 1 つ以上のスタイル属性を設定できます。単一の CSS スタイルを設定するには、「css(属性名, 値);」ステートメントを使用し、複数のスタイルを設定するには、「css({attribute名前 1: 値) 1, 属性名 2: 値 2...}" ステートメント。

jqでCSSスタイルを設定する方法

このチュートリアルの動作環境: Windows 7システム、jquery バージョン 1.10.0、Dell G3 コンピューター。

css() メソッドを使用して CSS スタイルを設定します

css() メソッドは 1 つ以上の CSS スタイルを設定します選択した要素のスタイル属性。

構文は次のとおりです:

#1 つのスタイル:

css(プロパティ名, 値); #複数のスタイル:

css({プロパティ名 1: 値 1、属性名 2: 値 2...})

例: css() メソッドを使用して CSS プロパティを設定します。

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>注意字体和背景色的变化<h2>
<p>注意字体和背景色的变化</p>
<p>注意字体和背景色的变化</p>
<button type="button">点击我观察变化</button>
</body>
</html>

ログイン後にコピー

スタイルカテゴリに関連するメソッド

クラスを通じて HTML 要素のカテゴリを指定できます。jquery の CSS カテゴリに関連するメソッド

1.addClass() メソッド: 一致する HTML 要素の属性にカテゴリを追加します。

構文:

addClass(classname)

、classname は追加するカテゴリの名前です。 2.hasClass() メソッド: 一致する要素が指定されたカテゴリを所有しているかどうかを判断できます。

構文:

hasClass(classname)

If 一致する場合要素に classname という名前のカテゴリがある場合、 hasClass() メソッドは True を返し、それ以外の場合は False を返します。

3.removeClass() メソッド: 一致する HTML 要素の指定されたクラス属性を削除します。つまり、切り替えを実行します。

構文:

removeClass(classname)

、classname は切り替えるカテゴリの名前です4.toggleClass() メソッド: 各メソッドで指定されたクラスを確認します。存在しない場合はクラスを追加し、設定されている場合は削除します。

構文:

toggleClass(classname)

、classname は切り替えるカテゴリの名前です例: addClass() メソッドを使用して、class 属性のインスタンスを HTML 要素に追加します。

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
p{
margin:8px;
font-size:16px;
}
.selected{
color:red;
}
.highlight{
background:yellow;
}
</style>
</head>
<body>
<p>注意我的变化</p>
<button type="button" id="addClass">添加样式</button>
<button type="button" id="removeClass">删除样式</button>
<script type="text/javascript">
$("#addClass").click(function(){
$("p").addClass("selected highlight");
});
$("#removeClass").click(function(){
$("p").removeClass("selected highlight");
});
</script>

ログイン後にコピー

HTML 要素のサイズの取得と設定

#1.height() メソッド: 要素の高さを取得および設定します。構文は次のとおりです:

高さを取得するための構文:

value=height();

高さを設定するための構文: height(value);

2.innerHeight() メソッド: 要素の高さを取得します (上下の内枠を含む) 。

構文:

value=innerHeight();

3.innerWidth() メソッド: 要素の幅 (左右のパディングを含む) を取得します。

構文:

value=innerWidth();

4.outerHeight() メソッド: 要素の高さを取得します (要素の内側の境界線、境界線、マージンを含む)。上下）。

構文:

value=outerHeight();

5.outerWidth() メソッド: 要素の幅を取得します (左右のパディング、境界線、マージンを含む) 。

構文:

value=outerWidth();

6.width() メソッド: 要素の幅を取得および設定します。構文は次のとおりです。

幅を取得するための構文:

value=width();

幅を設定するための構文: width(value );

例: HTML 要素の高さを取得します。

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
button{
font-size:12px;
margin:2px;
}
p{
width:150px;
border:1px red solid;
}
div{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<button id="getp">获取段落尺寸</button>
<button id="getd">获取文档尺寸</button>
<button id="getw">获取窗口尺寸</button>
 
<div> </div>
<p>用于测试尺寸的段落。</p>
<script>
function showHeight(ele,h){
   $("div").text(ele+"的高度为"+h+"px.");
}
$("#getp").click(function(){
 showHeight("段落",$("p").height());
});
$("#getd").click(function(){
 showHeight("文档",$(document).height());
});
$("#getw").click(function(){
 showHeight("窗口",$(window).height());
});
</script>
</body>
</html>

ログイン後にコピー

推奨される関連ビデオチュートリアル:

jQuery チュートリアル

(ビデオ)

以上がjqでCSSスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。