I'd like to be able to access the font size of a GWT Label. I've tried:
String fontSize = label.getElement().getStyle().getFontSize()
but this seems to only be for font sizes that have been programatically set (and not font sizes that are decided by CSS rules). Any ideas?
Thanks,
~Owen
If it is the computed size you are looking for, GWT does not provide it out of the box, but you should be able to use a simple JSNI to retrieve it. Something like:
public static native String getComputedStyleProperty(Element element, String property) /*-{
if ($doc.defaultView && $doc.defaultView.getComputedStyle) {
return $doc.defaultView.getComputedStyle(element, null).getPropertyValue(property);
}
return "";
}-*/;
Untested but should get you started. Do note that, the property should be camelCase and, for IE < 9, you should also check for currentStyle. Also a fallback based on element's style property should be returned, instead the empty string.
See also Get computed font size for DOM element in JS.
No, getFontSize() returns CSS property only.
Give a try like below:
String fontsize= DOM.getStyleAttribute(label.getElement(), "font-size");
Related
I am looking for the next scenario in css where i will be able to check if a style is applied without using any javascript code. Example: If flex: wrap is applied add another style like gap: 5. All this computations should be done using only css. I inspected the documentation but i did not find something similar. Could somebody help?
You can directly use the "gap" css. If there is a flex property used, only then the gap property will work. So no harm in using the gap property by default. Why check for whether flex is used or not.
as far as I understand, to check a style is applied, it must use javascript code,
ex:
const box = document.getElementById('box');
// Check if CSS property is contained in Style
if (box.style.backgroundColor) {
console.log('value is', box.style.backgroundColor);
} else {
console.log('CSS property is not contained in style');
}
Given only a css stylesheet, is it possible to parse and query the stylesheet using some sort of a path query to retrieve a computed style similar to what is returned from IElement.ComputeCurrentStyle()?
var css = #"
<style>
table { font-family:foobar }
td { font-weight:bold }
</style>
";
var config = Configuration.Default.WithDefaultLoader().WithCss();
var context = BrowsingContext.New(config);
IDocument document = await context.OpenAsync(req => req.Content(css));
ICssStyleSheet sheet = document.GetStyleSheets().OfType<ICssStyleSheet>().First()
Is it possible to do something like sheet.GetComputedStyle("body>table>tbody>tr>td") to retrieve a ICssStyleDeclaration?
Got a response to this on the github project issue tracker
https://github.com/AngleSharp/AngleSharp.Css/issues/64
Well to get a computed style you need to have a connection to the DOM. After all, things like selectors can only be computed in context of an available DOM structure.
I guess what you are after is to "fake" the DOM, i.e., if you see some selector (like body>table>tbody>tr>td) create the minimal DOM to be able to get an element that satisfies the selector. Then use this element to get the computed style, right?
Out of the box this is not possible, but I think it should be doable to write this.
I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
I Konw I can use setStyleSheet() to set style in Qt.But I encountered a problem,when I used setStyleSheet() twice first styles lost,which are set by first use of setStyleSheet().
For exmaple,
setStyleSheet("QLabel{color:red;}");
…………
setStyleSheet("QLabel{border-image:url(……)}")
When I set border-image,the red color property lost.
I tried to solve it by using
setStyleSheet(styleSheet()+QString("QLabel{border-image:url(……)}"));
but it was the same that only the border-image property existed.
Must I add every style property when I use setStyleSheet(),although that I set it before.
Thanks for bearing my poor written English.Any tips will be appreciated.
You can set stylesheets without QLabel tag:
setStyleSheet("color:red;");
After setting one stylesheet property, you can add another property like:
setStyleSheet( styleSheet().append(QString("border-image:url(……);")) );
This is in response to your comment on the accepted answer.
You can prevent overwriting stylesheets properties by setting the constant values to the parent (permitting that the parent's style isn't being changed dynamically as well). Only set the values that you change with C++ to the child item.
parentWidget->setStyleSheet( "QLabel#yourLabel { color:red; }" );
yourLabel->setStyleSheet( "QLabel { border-image:url(...) };" );
This will retain all of the parents properties that have been set on the widget when you change the widget's stylesheet.
Furthermore, this removes the case of a very large string, which is possible in the accepted answer. Frequent changes will inefficiently append the string with previously defined styles that will not be used.
By using double column for the second entry.
ui->pushButton_2->setStyleSheet(
"QPushButton{background-color:red;color:white}\
QPushButton::hover{color:black}");
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.