TopJavaScriptjQuery > 2013年3月
2013年3月27日

jQueryでCSSのimportantを指定する方法

March 27,2013 12:33 AM
Tag:[, ]
Permalink

jQueryでCSSのimportantを指定する方法を紹介します。

jQuery

1.問題点

jQueryでCSSの設定を行う場合、css()を利用します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('.foo').css('color', '#f00');
});
</script>
<p class="foo">Hello!</p>

ただし、importantを指定するときに次のように記述しても有効になりません。

<script>
$(function(){
    $('.foo').css('color', '#f00!important');
});
</script>

2.jQueryでCSSのimportantを指定する

jQueryでCSSのimportantを指定するには「cssText」を利用します。

<script>
$(function(){
    $('.foo').css('cssText', 'color: #f00!important');
});
</script>

cssTextはimportantの有無に関係なく、通常のCSSの設定でも利用できます。

3.cssTextとは

cssTextは、CSSを「プロパティ: 値」という、実際のテキスト形式で読み書きするための機能です。

JavaScriptでは次のように記述すれば、プロパティと値を設定することも可能です。

document.body.style.cssText = 'color: #f00;';

次のように記述すれば、一番最初のセレクタのプロパティと値を取得できます。

<script>
var stylesheet = document.styleSheets[0];
console.log(stylesheet.cssRules[0].cssText);
</script>

4.cssTextに複数のプロパティと値を設定する

話がそれますが、cssTextに複数のプロパティと値を設定するには、単純に連結してください。

<script>
$(function(){
    $('.foo').css('cssText', 'color: #f00;' + 'margin: 10px;');
});
</script>

連結する場合、区切りのセミコロンを忘れないように気をつけましょう。

Comments [0] | Trackbacks [0]
2013年3月11日

ページを移動(離脱)するときにjQueryで警告を出す方法

March 11,2013 12:55 AM
Tag:[, ]
Permalink

Facebookなどでフォーム入力中にページを移動(離脱)しようとすると警告が表示されます。

Facebook

この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。

1.ページを移動するときに警告を出す

ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).on('beforeunload', function() {
        return '投稿が完了していません。このまま移動しますか?';
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

ブラウザによってはreturn時の文字列が表示されます。下のスクリーンショットはGoogle Chromeの例です。

Google Chrome

beforeunloadは、unloadしていいかどうかを尋ねるためのイベントで、HTML5の6.1.6に掲載されています。

6.1.6 Events

2.フォーム送信時に警告が出ないようにする

1項の実装だけではフォーム送信時にも警告が出てしまいます。

フォーム送信時に警告が出ないようにするには、例えばclickイベントを使って、送信時にbeforeunloadイベントを無効にします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).on('beforeunload', function() {
        return '投稿が完了していません。このまま移動しますか?';
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

3.フォームに入力があったときだけ警告を出すようにする

2項までの実装だけでは、フォームの入力有無に関わらず警告が出てしまいます。

フォームに入力があったときだけ警告を出すようにするには、1項で実装したonイベントをフォームのchangeイベントなどでラップします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $("input[type=text]").change(function() {
        $(window).on('beforeunload', function() {
            return '投稿が完了していません。このまま移動しますか?';
        });
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

これで次のような挙動になります。

  • フォームに入力がない場合にページ移動:警告非表示
  • フォーム入力後にページ移動:警告表示
  • フォーム送信時:警告非表示

フォームの入力文字が空になったらbeforeunloadイベントをoffにするように変更すれば、よりきめ細かい制御ができると思います。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3