Skip to content

Instantly share code, notes, and snippets.

@YusukeHirao
Created December 2, 2013 15:31
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save YusukeHirao/7751194 to your computer and use it in GitHub Desktop.
なぜクライアントサイドJavaScriptにはHTML/CSSの知識が必要か? ref: http://qiita.com/YusukeHirao/items/bba3d05dda7f0459a913
<div id="mkbn">まかべん</div>
$('#mkbn').css('color', 'red');
<style>
#mkbn {
color: blue !important;
}
</style>
<div id="mkbn">まかべん</div>
<style>
#mkbn {
color: blue !important;
}
</style>
<div id="mkbn" style="color: red;">まかべん</div>
<style>
#mkbn {
color: #fff;
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
background: #000;
}
</style>
<div id="mkbn">まかべん</div>
$('#mkbn').animate({
left: 100
}, {
duration: 1200
});
<div id="mkbn" style="left: 0.01px;">まかべん</div>
<div id="mkbn" style="left: 0.06px;">まかべん</div>
<div id="mkbn" style="left: 0.11px;">まかべん</div>
<div id="mkbn" style="left: 1.23px;">まかべん</div>
<div id="mkbn" style="left: 23.11px;">まかべん</div>
<div id="mkbn" style="left: 79.23px;">まかべん</div>
<div id="mkbn" style="left: 81.23px;">まかべん</div>
<div id="mkbn" style="left: 92.58px;">まかべん</div>
<div id="mkbn" style="left: 99.99px;">まかべん</div>
<div id="mkbn" style="left: 100px;">まかべん</div>
<style>
#mkbn {
}
</style>
<div id="mkbn">まかべん</div>
$('#mkbn').animate({
left: 100
}, {
duration: 1200
});
<div id="mkbn" style="left: 0.01px;">まかべん</div>
<div id="mkbn" style="left: 0.06px;">まかべん</div>
<div id="mkbn" style="left: 0.11px;">まかべん</div>
<div id="mkbn" style="left: 1.23px;">まかべん</div>
<div id="mkbn" style="left: 23.11px;">まかべん</div>
<div id="mkbn" style="left: 79.23px;">まかべん</div>
<div id="mkbn" style="left: 81.23px;">まかべん</div>
<div id="mkbn" style="left: 92.58px;">まかべん</div>
<div id="mkbn" style="left: 99.99px;">まかべん</div>
<div id="mkbn" style="left: 100px;">まかべん</div>
<div id="hoge"></div>
#hoge {
position: absolute; // ここを変えて見てみる
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
}
<div id="mkbn" style="color: red;">まかべん</div>
<div id="mkbn">まかべん</div>
<div id="mkbn" style="position: absolute; top: 0; left: 0; width: 100%; height: 100px">まかべん</div>
$('#mkbn').css('position', 'absolute');
$('#mkbn').css('top', 0);
$('#mkbn').css('left', 0);
$('#mkbn').css('width', '100%');
$('#mkbn').css('height', 100);
$('#mkbn').css({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
left: 100
});
<div id="mkbn" class="current">まかべん</div>
<div id="fff">かわ〜ズ</div>
<div id="mkbn">まかべん</div>
<div id="fff" class="current">かわ〜ズ</div>
$('#mkbn').removeClass('current');
$('#fff').addClass('current');
<ol>
<li>まかべん</li>
<li>かわ〜ズ</li>
</ol>
<ul>
<li>まかべん</li>
<li>かわ〜ズ</li>
</ul>
<div id="fff">かわ〜ず</div>
$('<ul />').append($('ol').find('li')).insertAfter('ol');
$('ol').remove();
$('#fff').hide();
<div id="fff" style="display: none;">かわ〜ず</div>
<div id="mkbn">まかべん</div>
$('#mkbn').after('<div id="fff">かわ〜ず</div>');
<div id="mkbn">まかべん</div><div id="fff">かわ〜ず</div>
$('#mkbn').css('color', 'red');
function anime () {
$('#hoge')
.animate({ left: 80 })
.animate({ top: 80 })
.animate({ left: 0 })
.animate({ top: 0 })
.promise()
.done(anime);
}
anime();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment