ライブラリ:jQuery
4月から某IT企業で働いているのですが、Webシステムの開発をやるようになって、JavaScript+jQueryで動的にいろいろな処理をしています。
はっきり言って、jQueryは良い感じです。
ということで、jQueryでCSSを扱う方法を記事にしてみました。
CSSの変更
構文的には
$("#エレメントのID").css(属性, 値)
です。
以下に例を示します(赤い部分)。
<html>
<head>
<title>jQyeryでcssを変更</title>
<script type="text/javascript" src="/src/common/js/jquery.js"></script>
<script type="text/javascript">
<!--
window.onload = function() {
$("#change_css").css("border-style", "solid");
$("#change_css").css("border-color", "#FF0000");
}
-->
</script>
</head>
<body>
<div id="change_css">Hello World!!</div>
</body>
</html>
<head>
<title>jQyeryでcssを変更</title>
<script type="text/javascript" src="/src/common/js/jquery.js"></script>
<script type="text/javascript">
<!--
window.onload = function() {
$("#change_css").css("border-style", "solid");
$("#change_css").css("border-color", "#FF0000");
}
-->
</script>
</head>
<body>
<div id="change_css">Hello World!!</div>
</body>
</html>
この例はボックスの枠を赤くするだけです。
jQueryはかなり使えるので、まだまだ勉強中です。記事も増えそうです。